Do not call onConfirmRow when Enter is pressed in DataTable row children

hypothesis · Jun 4, 2024 · 4d9d82b · 4d9d82b
1 parent 7c15e79
commit 4d9d82b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/components/data/DataTable.tsx b/src/components/data/DataTable.tsx
@@ -247,7 +247,8 @@ export default function DataTable<Row>({
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent, row: Row) => {
-      if (event.key === 'Enter') {
+      // Ignore events triggered in children elements
+      if (event.key === 'Enter' && event.target === event.currentTarget) {
         confirmRow(row);
         event.preventDefault();
         event.stopPropagation();

diff --git a/src/components/data/test/DataTable-test.js b/src/components/data/test/DataTable-test.js
@@ -273,6 +273,18 @@ describe('DataTable', () => {
 
       assert.calledWith(onConfirmRow, fakeRows[0]);
     });
+
+    it("does not invoke `onConfirmRow` callback when `Enter` is pressed on a row's child", () => {
+      const onConfirmRow = sinon.stub();
+      const wrapper = createComponent({
+        onConfirmRow,
+        renderItem: (row, field) => <a href="/">{field}</a>,
+      });
+
+      wrapper.find('tbody tr a').first().simulate('keydown', { key: 'Enter' });
+
+      assert.notCalled(onConfirmRow);
+    });
   });
 
   context('when loading', () => {