From 60bcb6c3b3054862ea0d74b9888c223862a0f9fa Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 23 Mar 2021 12:44:48 -0500
Subject: [PATCH] redirect affordance click

---
 .../card/checkable_card/checkable_card.tsx         | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/card/checkable_card/checkable_card.tsx b/src/components/card/checkable_card/checkable_card.tsx
index 18b8ea33a3d..d507b37f4ed 100644
--- a/src/components/card/checkable_card/checkable_card.tsx
+++ b/src/components/card/checkable_card/checkable_card.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { FunctionComponent, ReactNode } from 'react';
+import React, { FunctionComponent, ReactNode, useRef } from 'react';
 import classNames from 'classnames';
 
 import {
@@ -68,6 +68,7 @@ export const EuiCheckableCard: FunctionComponent<EuiCheckableCardProps> = ({
   ...rest
 }) => {
   const { id } = rest;
+  const labelEl = useRef<HTMLLabelElement>(null);
   const classes = classNames(
     'euiCheckableCard',
     {
@@ -96,6 +97,12 @@ export const EuiCheckableCard: FunctionComponent<EuiCheckableCardProps> = ({
     'euiCheckableCard__label-isDisabled': disabled,
   });
 
+  const onChangeAffordance = () => {
+    if (labelEl.current) {
+      labelEl.current.click();
+    }
+  };
+
   return (
     <EuiSplitPanel.Outer
       responsive={false}
@@ -104,15 +111,14 @@ export const EuiCheckableCard: FunctionComponent<EuiCheckableCardProps> = ({
       direction="row"
       className={classes}>
       <EuiSplitPanel.Inner
-        // Bubbles up the change event when clicking on the whole div for extra affordance
-        // @ts-ignore `onChange` doesn't match that of HTMLInput?
-        onClick={disabled ? undefined : () => rest.onChange()}
+        onClick={disabled ? undefined : onChangeAffordance}
         color={checked ? 'primary' : 'subdued'}
         grow={false}>
         {checkableElement}
       </EuiSplitPanel.Inner>
       <EuiSplitPanel.Inner>
         <label
+          ref={labelEl}
           className={labelClasses}
           htmlFor={id}
           aria-describedby={children ? `${id}-details` : undefined}>