[EuiCheckableCard] Fix onChange handler being invoked twice

packages/eui/changelogs/upcoming/8786.md

@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed `onChange` being triggered twice when the checkbox in `EuiCheckableCard` is clicked
+

packages/eui/src/components/card/checkable_card/checkable_card.spec.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../../cypress/support" />
+
+import React, { FunctionComponent, useState } from 'react';
+
+import { EuiCheckableCard, type EuiCheckableCardProps } from '../index';
+
+describe('EuiCheckableCard', () => {
+  const StatefulCheckableCard: FunctionComponent<
+    Partial<EuiCheckableCardProps>
+  > = ({ checkableType = 'checkbox', ...rest }) => {
+    const [isChecked, setChecked] = useState(false);
+
+    return (
+      <EuiCheckableCard
+        id="checkableCard"
+        label="Checkable card"
+        data-test-subj="checkableCard"
+        checkableType={checkableType}
+        {...rest}
+        checked={isChecked}
+        onChange={() => setChecked((checked) => !checked)}
+      />
+    );
+  };
+
+  describe('Click behavior', () => {
+    it('fired onChange only once when the checkbox is clicked', () => {
+      cy.realMount(<StatefulCheckableCard />);
+
+      cy.get('[data-test-subj=checkableCard]').realClick();
+
+      cy.get('[data-test-subj=checkableCard]').should('be.checked');
+    });
+  });
+});

packages/eui/src/components/card/checkable_card/checkable_card.tsx

@@ -75,6 +75,7 @@ export const EuiCheckableCard: FunctionComponent<EuiCheckableCardProps> = ({
 
   const { id } = rest;
   const labelEl = useRef<HTMLLabelElement>(null);
+  const inputEl = useRef<HTMLInputElement>(null);
   const classes = classNames('euiCheckableCard', className);
 
   let checkableElement;
@@ -88,14 +89,19 @@ export const EuiCheckableCard: FunctionComponent<EuiCheckableCardProps> = ({
     );
   } else {
     checkableElement = (
-      <EuiCheckbox checked={checked} disabled={disabled} {...rest} />
+      <EuiCheckbox
+        inputRef={inputEl}
+        checked={checked}
+        disabled={disabled}
+        {...rest}
+      />
     );
   }
 
   const labelClasses = classNames('euiCheckableCard__label');
 
-  const onChangeAffordance = () => {
-    if (labelEl.current) {
+  const onChangeAffordance = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (labelEl.current && e.target !== inputEl.current) {
       labelEl.current.click();
     }
   };

packages/eui/src/components/form/checkbox/checkbox.tsx

@@ -13,6 +13,7 @@ import React, {
   InputHTMLAttributes,
   LabelHTMLAttributes,
   useCallback,
+  Ref,
 } from 'react';
 import classNames from 'classnames';
 
@@ -28,7 +29,7 @@ export interface EuiCheckboxProps
   id: string;
   checked?: boolean;
   onChange: ChangeEventHandler<HTMLInputElement>; // overriding to make it required
-  inputRef?: (element: HTMLInputElement) => void;
+  inputRef?: Ref<HTMLInputElement> | ((element: HTMLInputElement) => void);
   label?: ReactNode;
   disabled?: boolean;
   indeterminate?: boolean;

packages/website/docs/components/containers/card.mdx

@@ -363,7 +363,7 @@ export default () => {
       checkableType="checkbox"
       value="checkbox1"
       checked={checkbox}
-      onChange={() => setCheckbox(!checkbox)}
+      onChange={() => setCheckbox(checked => !checked)}
     />
   );
 };