fix(inlinecheckbox): do not propagate click event from label (#10151)

* fix(inlinecheckbox): do not propagate click event from label * test(inlinecheckbox): update snaps
carbon-design-system · Dec 6, 2021 · 12ac684 · 12ac684
1 parent d724a26
commit 12ac684
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 3 deletions.
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -998,6 +998,7 @@ exports[`DataTable selection should have select-all default to un-checked if no
                               aria-label="Select all rows"
                               className="bx--checkbox-label"
                               htmlFor="data-table-7__select-all"
+                              onClick={[Function]}
                             />
                           </InlineCheckbox>
                         </ForwardRef(InlineCheckbox)>
@@ -1404,6 +1405,7 @@ exports[`DataTable selection should render 1`] = `
                               aria-label="Select all rows"
                               className="bx--checkbox-label"
                               htmlFor="data-table-6__select-all"
+                              onClick={[Function]}
                             />
                           </InlineCheckbox>
                         </ForwardRef(InlineCheckbox)>
@@ -1505,6 +1507,7 @@ exports[`DataTable selection should render 1`] = `
                               aria-label="Select row"
                               className="bx--checkbox-label"
                               htmlFor="data-table-6__select-row-b"
+                              onClick={[Function]}
                             />
                           </InlineCheckbox>
                         </ForwardRef(InlineCheckbox)>
@@ -1574,6 +1577,7 @@ exports[`DataTable selection should render 1`] = `
                               aria-label="Select row"
                               className="bx--checkbox-label"
                               htmlFor="data-table-6__select-row-a"
+                              onClick={[Function]}
                             />
                           </InlineCheckbox>
                         </ForwardRef(InlineCheckbox)>
@@ -1643,6 +1647,7 @@ exports[`DataTable selection should render 1`] = `
                               aria-label="Select row"
                               className="bx--checkbox-label"
                               htmlFor="data-table-6__select-row-c"
+                              onClick={[Function]}
                             />
                           </InlineCheckbox>
                         </ForwardRef(InlineCheckbox)>

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectAll-test.js.snap
@@ -56,6 +56,7 @@ exports[`DataTable.TableSelectAll should render 1`] = `
                         aria-label="Select all rows in the table"
                         className="bx--checkbox-label"
                         htmlFor="id"
+                        onClick={[Function]}
                       />
                     </InlineCheckbox>
                   </ForwardRef(InlineCheckbox)>

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableSelectRow-test.js.snap
@@ -55,6 +55,7 @@ exports[`DataTable.TableSelectRow should render 1`] = `
                         aria-label="Aria label"
                         className="bx--checkbox-label"
                         htmlFor="id"
+                        onClick={[Function]}
                       />
                     </InlineCheckbox>
                   </ForwardRef(InlineCheckbox)>

diff --git a/packages/react/src/components/DataTable/stories/DataTable-selection-story.js b/packages/react/src/components/DataTable/stories/DataTable-selection-story.js
@@ -19,6 +19,7 @@ import DataTable, {
 } from '../../DataTable';
 import { rows, headers } from './shared';
 import mdx from '../DataTable.mdx';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Components/DataTable/Selection',
@@ -69,8 +70,19 @@ export const Usage = () => (
           </TableHead>
           <TableBody>
             {rows.map((row, i) => (
-              <TableRow key={i} {...getRowProps({ row })}>
-                <TableSelectRow {...getSelectionProps({ row })} />
+              <TableRow
+                key={i}
+                {...getRowProps({ row })}
+                onClick={(evt) => {
+                  action('TableRow onClick')(evt);
+                }}>
+                <TableSelectRow
+                  {...getSelectionProps({ row })}
+                  onSelect={(evt) => {
+                    action('TableSelectRow onSelect')(evt);
+                    getSelectionProps({ row }).onSelect(evt);
+                  }}
+                />
                 {row.cells.map((cell) => (
                   <TableCell key={cell.id}>{cell.value}</TableCell>
                 ))}

diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox-test.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import InlineCheckbox from '../InlineCheckbox';
+import userEvent from '@testing-library/user-event';
+
+describe('InlineCheckbox', () => {
+  it('should render', () => {
+    render(<InlineCheckbox />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+
+  it('should only propagate click events from the input', () => {
+    const onClick = jest.fn();
+    render(
+      /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
+      <div onClick={onClick}>
+        <InlineCheckbox />
+      </div>
+    );
+    userEvent.click(screen.getByRole('checkbox'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js
@@ -134,12 +134,15 @@ class InlineCheckbox extends React.Component {
       <>
         <input {...inputProps} />
         {
-          /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control */
+          /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
           <label
             htmlFor={id}
             className={`${prefix}--checkbox-label`}
             aria-label={ariaLabel}
             title={title}
+            onClick={(evt) => {
+              evt.stopPropagation();
+            }}
           />
         }
       </>