From 6b4785ef1edecfcccdb3f435a002427727f79ea5 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Tue, 4 Jun 2024 11:23:11 +0200
Subject: [PATCH] Do not call onConfirmRow when Enter is pressed in DataTable
 row children

---
 src/components/data/DataTable.tsx          |  4 +++-
 src/components/data/test/DataTable-test.js | 12 ++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/data/DataTable.tsx b/src/components/data/DataTable.tsx
index d1451fdc..7cee0807 100644
--- a/src/components/data/DataTable.tsx
+++ b/src/components/data/DataTable.tsx
@@ -247,7 +247,9 @@ export default function DataTable<Row>({
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent, row: Row) => {
-      if (event.key === 'Enter') {
+      // Avoid preventing Enter key interactions in children elements by
+      // ignoring events not triggered by the row element itself
+      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
index 130e27a4..17012143 100644
--- 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', () => {