[EuiCheckableCard] Fix onChange handler being invoked twice

[mgadewoll]

Summary

closes #8782

Why are we making this change?

This PR fixes an unexpected behavior where the onChange event would be triggered twice on click of the checkbox within EuiCheckableCard. This would result in the checkbox being unchecked instead of checked.

This was due to the wrapper having a separate click handler to enlarge the clickable area.
The fix applied is to only trigger the wrapper click handler if the wrapper is clicked, not the checkbox.

Screenshots

Scenario: After a single click on the checkbox:

before: checkbox is unchecked

after: checkbox is checked

QA

• newly added cypress regression test passes
• checkout this PR and open the added "TESTING_EXAMPLE" story and:
  • verify the checkbox is checked on a single click to the checkbox
  • verify the checkbox is checked on a click to the area around the checkbox and on the label
  • remove the check on the e.target in checkable_card.tsx and confirm that previously the checkbox is not checked on a single click

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[weronikaolejniczak]

LGTM! 🟢 It works as expected, thanks for fixing this so quickly, @mgadewoll!

Non-blocking suggestion:

Let's update our checkable example in the docs to use prevValue => !prevValue to promote React best practices.

packages/website/docs/components/containers/card.mdx:366
onChange={(prevValue) => setCheckbox(!prevValue)}

[weronikaolejniczak]

Actually, I checked the staging link and it is not working as expected. Digging in...

Screen.Recording.2025-06-12.at.19.39.59.mov

[mgadewoll]

Actually, I checked the staging link and it is not working as expected. Digging in...

@weronikaolejniczak You have a small mistake in your code update, that's why it doesn't work 🙂
It should be () => setChecked(prevValue => !prevValue)

Screen.Recording.2025-06-12.at.19.52.59.mov

[weronikaolejniczak]

@mgadewoll The issue was not even that because I did this screen just to send it here, must've typoed 😄 It's that I was reviewing prod and not the staging link. Late PR reviewing 🫠

I reviewed again today and it works as expected both locally in Storybook and in staging docs 👍🏻

[mgadewoll]

Let's update our checkable example in the docs to use prevValue => !prevValue to promote React best practices.

ℹ️ Updated the docs example in 5bd67b7

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 5bd67b7
• Documentation website

History

• 💚 Build #502 succeeded 20c6835

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 5bd67b7

History

• 💚 Build #4170 succeeded 20c6835

cc @mgadewoll