From 73ea08a5fc3041dbcee792ff87960b8795830c67 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 10 Jan 2023 16:44:07 +0100 Subject: [PATCH 1/3] fix(TableSelectionCell): Radios should not change selection on focus While native radios change selection on focus, it can be a bad experience for keyboard users on larger widgets. If an author wants to perform an action on row select, it won't force a keyboard user to perform that action for every row between the one that they're on and the one that they want. Fixes #26196 --- .../components/TableSelectionCell/useTableSelectionCell.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx index b605e210e6b2a..4ff2770bc4978 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx +++ b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { resolveShorthand } from '@fluentui/react-utilities'; +import { resolveShorthand, useId } from '@fluentui/react-utilities'; import { Checkbox } from '@fluentui/react-checkbox'; import { Radio } from '@fluentui/react-radio'; import type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types'; @@ -36,7 +36,7 @@ export const useTableSelectionCell_unstable = ( }), radioIndicator: resolveShorthand(props.radioIndicator, { required: type === 'radio', - defaultProps: { checked: !!checked }, + defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } }, }), type, checked, From b939e71eb933e78c9e9452d35487c5061a9395ad Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 10 Jan 2023 16:55:24 +0100 Subject: [PATCH 2/3] update tests --- .../components/TableSelectionCell/TableSelectionCell.test.tsx | 2 ++ .../__snapshots__/TableSelectionCell.test.tsx.snap | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx index 47ed0cada6ce9..37bde18504ae1 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx +++ b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { render } from '@testing-library/react'; +import { resetIdsForTests } from '@fluentui/react-utilities'; import { TableSelectionCell } from './TableSelectionCell'; import { isConformant } from '../../testing/isConformant'; import { TableSelectionCellProps } from './TableSelectionCell.types'; @@ -10,6 +11,7 @@ const tr = document.createElement('tr'); describe('TableSelectionCell', () => { beforeEach(() => { document.body.appendChild(tr); + resetIdsForTests(); }); isConformant({ diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap b/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap index e96b26dd14d43..0c12a88346c63 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap +++ b/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap @@ -10,7 +10,7 @@ exports[`TableSelectionCell renders a default state 1`] = ` >
Date: Tue, 10 Jan 2023 16:56:13 +0100 Subject: [PATCH 3/3] changefile --- ...i-react-table-dc36dcfe-b403-4c89-9868-b16b05e46700.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-table-dc36dcfe-b403-4c89-9868-b16b05e46700.json diff --git a/change/@fluentui-react-table-dc36dcfe-b403-4c89-9868-b16b05e46700.json b/change/@fluentui-react-table-dc36dcfe-b403-4c89-9868-b16b05e46700.json new file mode 100644 index 0000000000000..0055a60452dc4 --- /dev/null +++ b/change/@fluentui-react-table-dc36dcfe-b403-4c89-9868-b16b05e46700.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix(TableSelectionCell): Radios should not change selection on focus", + "packageName": "@fluentui/react-table", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +}