From d4b3ed1f530c01a923e620e3d37d78af4510ea30 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Tue, 10 Sep 2024 14:35:12 +0530 Subject: [PATCH 1/5] feat(table): add isKeyboardNavigationDisabled prop to the table --- packages/components/table/src/use-table.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/components/table/src/use-table.ts b/packages/components/table/src/use-table.ts index 56f48b01d4..f7194d84bc 100644 --- a/packages/components/table/src/use-table.ts +++ b/packages/components/table/src/use-table.ts @@ -90,6 +90,11 @@ interface Props extends HTMLNextUIProps<"table"> { * @default false */ disableAnimation?: boolean; + /** + * Whether to disable the keyboard navigation functionality. + * @default false + */ + isKeyboardNavigationDisabled?: boolean; /** * Props to be passed to the checkboxes. */ @@ -159,6 +164,7 @@ export function useTable(originalProps: UseTableProps) { layoutNode, removeWrapper = false, disableAnimation = globalContext?.disableAnimation ?? false, + isKeyboardNavigationDisabled = false, selectionMode = "none", topContentPlacement = "inside", bottomContentPlacement = "inside", @@ -186,6 +192,10 @@ export function useTable(originalProps: UseTableProps) { showSelectionCheckboxes, }); + if (isKeyboardNavigationDisabled && !state.isKeyboardNavigationDisabled) { + state.setKeyboardNavigationDisabled(true); + } + const {collection} = state; const {gridProps} = useReactAriaTable({...originalProps, layout: layoutNode}, state, domRef); From 7ac23859cebf8e15c9f2d324b0aba0d13358532f Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Tue, 10 Sep 2024 15:29:18 +0530 Subject: [PATCH 2/5] chore(table): adding the test for isKeyboardNavigationDiabled prop --- .../components/table/__tests__/table.test.tsx | 39 ++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/packages/components/table/__tests__/table.test.tsx b/packages/components/table/__tests__/table.test.tsx index e93b9be34a..b6232fd28b 100644 --- a/packages/components/table/__tests__/table.test.tsx +++ b/packages/components/table/__tests__/table.test.tsx @@ -1,8 +1,9 @@ import * as React from "react"; -import {act, render} from "@testing-library/react"; +import {act, fireEvent, render} from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import {Table, TableHeader, TableCell, TableColumn, TableBody, TableRow} from "../src"; +import {keyCodes} from "../../../utilities/test-utils/src"; const columns = [ {name: "Foo", key: "foo"}, @@ -95,6 +96,42 @@ describe("Table", () => { expect(wrapper.getAllByRole("gridcell")).toHaveLength(2); }); + it("should disable key navigations when isKeyboardNavigationDisabled is enabled", async () => { + const wrapper = render( + + + Foo + Bar + Baz + + + + Foo 1 + Bar 1 + Baz 1 + + + Foo 2 + Bar 2 + Baz 2 + + +
, + ); + + const row1 = wrapper.getAllByRole("row")[1]; + + // selecting the row1 + await act(async () => { + await userEvent.click(row1); + }); + expect(row1).toHaveFocus(); + + // triggering the arrow down on row1 should not shift the focus to row2 + fireEvent.keyDown(row1, {key: "ArrowDown", keyCode: keyCodes.ArrowDown}); + expect(row1).toHaveFocus(); + }); + it("should render dynamic table", () => { const wrapper = render( From c1beb99d3e3a48e7feff9b7f0112073c33fa14ee Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Tue, 10 Sep 2024 15:36:02 +0530 Subject: [PATCH 3/5] chore(docs): adding the info about isKeyboardNavigationDisabled prop --- apps/docs/content/docs/components/table.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx index 7a4e6cc630..adc32dd5f1 100644 --- a/apps/docs/content/docs/components/table.mdx +++ b/apps/docs/content/docs/components/table.mdx @@ -457,7 +457,7 @@ You can customize the `Table` component by passing custom Tailwind CSS classes t | disableAnimation | `boolean` | Whether to disable the table and checkbox animations. | `false` | | checkboxesProps | [CheckboxProps](/docs/components/checkbox/#checkbox-props) | Props to be passed to the checkboxes. | - | | classNames | `Record<"base" ｜ "table" ｜ "thead" ｜ "tbody" ｜ "tfoot" ｜ "emptyWrapper" ｜ "loadingWrapper" ｜ "wrapper" ｜ "tr" ｜ "th" ｜ "td" ｜ "sortIcon", string>` | Allows to set custom class names for the dropdown item slots. | - | - +| isKeyboardNavigationDisabled | `boolean` | Whether to disable keyboard navigations on the table | `false` | ### Table Events | Attribute | Type | Description | From f0ab5be8c6e9f651093c6c80190b1b57c1943bef Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Tue, 10 Sep 2024 15:51:51 +0530 Subject: [PATCH 4/5] chore(table): adding the changeset --- .changeset/fluffy-icons-refuse.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fluffy-icons-refuse.md diff --git a/.changeset/fluffy-icons-refuse.md b/.changeset/fluffy-icons-refuse.md new file mode 100644 index 0000000000..bfde0510a8 --- /dev/null +++ b/.changeset/fluffy-icons-refuse.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/table": patch +--- + +Currently, whenever any arrow-key keypress is triggered it navigates the focus to other cell/row. This creates an issue when the table cell contains a component which requires this keys for specific purpose (eg. if a table cell contains input component, it might need arrow keys for editing. But it is not possible because whenever the keypress triggers navigation). The PR adds an `isKeyboardNavigationDisabled` prop to disable the navigation. From 87335e4ebbc41a4051f98879f4a0e22e5ea993ea Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Tue, 10 Sep 2024 16:35:35 +0530 Subject: [PATCH 5/5] chore(nit): nits --- apps/docs/content/docs/components/table.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx index adc32dd5f1..029496136c 100644 --- a/apps/docs/content/docs/components/table.mdx +++ b/apps/docs/content/docs/components/table.mdx @@ -457,7 +457,7 @@ You can customize the `Table` component by passing custom Tailwind CSS classes t | disableAnimation | `boolean` | Whether to disable the table and checkbox animations. | `false` | | checkboxesProps | [CheckboxProps](/docs/components/checkbox/#checkbox-props) | Props to be passed to the checkboxes. | - | | classNames | `Record<"base" ｜ "table" ｜ "thead" ｜ "tbody" ｜ "tfoot" ｜ "emptyWrapper" ｜ "loadingWrapper" ｜ "wrapper" ｜ "tr" ｜ "th" ｜ "td" ｜ "sortIcon", string>` | Allows to set custom class names for the dropdown item slots. | - | -| isKeyboardNavigationDisabled | `boolean` | Whether to disable keyboard navigations on the table | `false` | +| isKeyboardNavigationDisabled | `boolean` | Whether to disable keyboard navigations or not. | `false` | ### Table Events | Attribute | Type | Description |