fix(table): prevent double click action on row selection checkboxes (#…

…3973)
coveo · Dec 5, 2024 · d78b44b · d78b44b
1 parent 89ccad4
commit d78b44b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/packages/mantine/src/components/table/layouts/__tests__/RowLayout.spec.tsx b/packages/mantine/src/components/table/layouts/__tests__/RowLayout.spec.tsx
@@ -402,6 +402,32 @@ describe('RowLayout', () => {
 
             expect(onClick).not.toHaveBeenCalled();
         });
+
+        it('does not trigger the double click action when double clicking on the selection checkbox', async () => {
+            const user = userEvent.setup();
+            const doubleClickSpy = vi.fn();
+            const data: RowData[] = [
+                {id: '🆔-1', firstName: 'Mario'},
+                {id: '🆔-2', firstName: 'Luigi'},
+            ];
+            const Fixture = () => {
+                const store = useTable<RowData>({enableMultiRowSelection: true});
+                return (
+                    <Table<RowData>
+                        store={store}
+                        getRowId={({id}) => id}
+                        data={data}
+                        columns={columns}
+                        layoutProps={{onRowDoubleClick: doubleClickSpy}}
+                    />
+                );
+            };
+            render(<Fixture />);
+            await user.dblClick(
+                within(screen.getByRole('row', {name: /Mario/i})).getByRole('checkbox', {name: /select row/i}),
+            );
+            expect(doubleClickSpy).not.toHaveBeenCalled();
+        });
     });
 
     it('passes down attributes given by getRowAttributes function to the row element', () => {

diff --git a/packages/mantine/src/components/table/table-column/TableSelectableColumn.tsx b/packages/mantine/src/components/table/table-column/TableSelectableColumn.tsx
@@ -32,6 +32,10 @@ export const TableSelectableColumn: ColumnDef<unknown> = {
             onChange={row.getToggleSelectedHandler()}
             flex={1}
             aria-label="Select row"
+            onDoubleClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+            }}
         />
     ),
 };
diff --git a/packages/website/src/examples/layout/Table/TableMultiSelection.demo.tsx b/packages/website/src/examples/layout/Table/TableMultiSelection.demo.tsx
@@ -69,6 +69,7 @@ const Demo = () => {
             getRowId={({id}) => id}
             columns={columns}
             options={options}
+            layoutProps={{onRowDoubleClick: (row) => alert(`Row double clicked: ${row.title}`)}}
             getRowActions={(selected: IExampleRowData[]): TableAction[] =>
                 selected.length === 1
                     ? [