Skip to content

Conversation

@breehall
Copy link
Contributor

@breehall breehall commented Jan 25, 2023

Fixes #6545

Summary

Resolved a bug that causes the onClick method to be triggered twice when clicking on a card title by creating a condition inside of outerOnClick to ensure the link does not contain a duplicate click event. Updated tests accordingly

QA

Testing:

  1. Pull branch and open src-docs/src/views/card/card_beta.tsx. Update the first EuiCard instance (line 13) to:
<EuiCard
        icon={<EuiIcon size="xxl" type="dashboardApp" />}
        title={<span>Dashboards</span>}
        description="Example of a card's description. Stick to one or two sentences."
        onClick={() => {
          console.log('Dashboards Clicked');
        }}
        betaBadgeProps={{
          label: 'Beta',
          tooltipContent:
            'This module is not GA. Please help us by reporting any bugs.',
        }}
      />
  1. Spin up EUI and navigate the the EuiCard Beta Badge example. When clicking on the title (Dashboards), you should find that the click event has only fired once, not twice.

General checklist

  • Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • Checked for breaking changes and labeled appropriately
  • A changelog entry exists and is marked appropriately

…ed twice when clicking on a card title by creating a condition inside of outerOnClick to ensure the link does not contain a duplicate click event.
@breehall breehall marked this pull request as ready for review January 25, 2023 20:42
@breehall breehall requested a review from cee-chen January 25, 2023 20:43
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6551/

@cee-chen
Copy link
Contributor

Pull branch and open src-docs/src/views/card/card_beta.tsx. Update the first EuiCard instance (line 13) to:

Quick FYI for future PRs and QA - I'd suggest a [REVERT ME] commit where you commit the repro changes to the PR, and then git revert [commitId] at the end before merging the PR in. This makes it significantly easier for others to quickly QA your fixes etc. on staging without having to pull down your branch. An example PR with this: https://github.com/elastic/eui/pull/6543/commits

@breehall breehall requested a review from cee-chen January 26, 2023 14:48
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_6551/

Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woohoo, thanks for jumping on this Bree! :shipit:

@breehall breehall merged commit 199d9e1 into elastic:main Jan 26, 2023
cee-chen added a commit to elastic/kibana that referenced this pull request Feb 9, 2023
## Summary

`[email protected]` ⏩ `[email protected]`

___

## [`74.0.2`](https://github.com/elastic/eui/tree/v74.0.2)

**Bug fixes**

- Fixed `EuiCard` to ensure `onClick` method only runs once when `title`
contains a React node
([#6551](elastic/eui#6551))
- Fixed `EuiSelectable` options with incorrect `aria-posinset` indices
when rendered with group labels not at the start of the array
([#6571](elastic/eui#6571))
- Fixed a bug with `EuiSearchBar` where filters with `multiSelect:
false` were not able to select a new option when an option was already
selected ([#6577](elastic/eui#6577))

Co-authored-by: Kibana Machine <[email protected]>
cee-chen pushed a commit to elastic/kibana that referenced this pull request Feb 9, 2023
## Summary

`[email protected]` ⏩ `[email protected]`

___

## [`74.1.0`](https://github.com/elastic/eui/releases/tag/v74.1.0)

- Added new `EuiSkeletonText`, `EuiSkeletonTitle`, `EuiSkeletonCircle`,
and `EuiSkeletonRectangle` components
([#6502](elastic/eui#6502))
- Updated `EuiSuperSelect` screen reader instructions to be more
specific ([#6549](elastic/eui#6549))
- Added `error` and updated `alert` glyphs to `EuiIcon`
([#6550](elastic/eui#6550))
- All `EuiSkeleton` components now accept an `isLoading` flag and
`children`, which automatically handles conditionally rendering loading
skeletons vs. loaded content (`children`)
([#6562](elastic/eui#6562))
- All `EuiSkeleton` components now accept a `contentAriaLabel` prop,
which more meaningfully describes the loaded content to screen readers
([#6562](elastic/eui#6562))
- Updated `EuiPopover` screen reader instructions for mobile and click
behaviors ([#6567](elastic/eui#6567))

**Bug fixes**

- Fixed `EuiCard` to ensure `onClick` method only runs once when `title`
contains a React node
([#6551](elastic/eui#6551))

**Deprecations**

- Deprecated `EuiLoadingContent` - use `EuiSkeletonText` instead
([#6557](elastic/eui#6557))

---------

Co-authored-by: Kibana Machine <[email protected]>
@breehall breehall deleted the card/onClick-fix branch September 18, 2023 19:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[EuiCard] title Prop Causing onClick to Trigger Twice When Clicked

3 participants