diff --git a/src/components/data/DataTable.tsx b/src/components/data/DataTable.tsx index d1451fdc..ed04b7be 100644 --- a/src/components/data/DataTable.tsx +++ b/src/components/data/DataTable.tsx @@ -247,7 +247,8 @@ export default function DataTable({ 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 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) => {field}, + }); + + wrapper.find('tbody tr a').first().simulate('keydown', { key: 'Enter' }); + + assert.notCalled(onConfirmRow); + }); }); context('when loading', () => {