Skip to content

[EuiCard] Harden Click Event Criteria to Prevent Duplicate onClick Events#6551

Merged
breehall merged 3 commits intoelastic:mainfrom
breehall:card/onClick-fix
Jan 26, 2023
Merged

[EuiCard] Harden Click Event Criteria to Prevent Duplicate onClick Events#6551
breehall merged 3 commits intoelastic:mainfrom
breehall:card/onClick-fix

Conversation

@breehall
Copy link
Copy Markdown
Contributor

@breehall breehall commented Jan 25, 2023 •
edited
Loading

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

@breehall
[EuiCard] Resolved a bug that causes the onClick method to be trigger…
e4c1bce 
…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
Changelog
84d5817
@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
Copy Markdown

kibanamachine commented Jan 25, 2023

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

@cee-chen
Copy link
Copy Markdown
Contributor

cee-chen commented Jan 25, 2023

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

cee-chen
cee-chen suggested changes Jan 25, 2023
View reviewed changes
@breehall @cee-chen
Update src/components/card/card.test.tsx
4e2cb24 
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
@breehall breehall requested a review from cee-chen January 26, 2023 14:48
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jan 26, 2023

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

cee-chen
cee-chen approved these changes Jan 26, 2023
View reviewed changes
Copy link
Copy Markdown
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
@JasonStoltz JasonStoltz mentioned this pull request Feb 2, 2023
Merged
@cee-chen cee-chen mentioned this pull request Feb 8, 2023
Merged
cee-chen added a commit to elastic/kibana that referenced this pull request Feb 9, 2023
@cee-chen @kibanamachine
Upgrade EUI to v74.0.2 (#150634)
e5a0a5d 
## Summary

`eui@74.0.1` ⏩ `eui@74.0.2`

___

## [`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 <42973632+kibanamachine@users.noreply.github.com>
cee-chen pushed a commit to elastic/kibana that referenced this pull request Feb 9, 2023
@JasonStoltz @kibanamachine
Upgrade EUI to v74.1.0 (#150235)
20a9a01 
## Summary

`eui@74.0.1` ⏩ `eui@74.1.0`

___

## [`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 <42973632+kibanamachine@users.noreply.github.com>
@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

Reviewers

1 more reviewer

@cee-chen cee-chen cee-chen approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

3 participants

@breehall @kibanamachine @cee-chen