diff --git a/change/@fluentui-react-combobox-fe5d376c-8505-4d92-a4dc-a8d66b74a826.json b/change/@fluentui-react-combobox-fe5d376c-8505-4d92-a4dc-a8d66b74a826.json new file mode 100644 index 00000000000000..244f1fe7a7926d --- /dev/null +++ b/change/@fluentui-react-combobox-fe5d376c-8505-4d92-a4dc-a8d66b74a826.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Escape in an open Combobox or Dropdown does not trigger tabster actions", + "packageName": "@fluentui/react-combobox", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.test.tsx b/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.test.tsx index bb9054a841c8a3..a7ac23f92c0460 100644 --- a/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.test.tsx +++ b/packages/react-components/react-combobox/library/src/components/Combobox/Combobox.test.tsx @@ -8,6 +8,7 @@ import { isConformant } from '../../testing/isConformant'; import { resetIdsForTests } from '@fluentui/react-utilities'; import { comboboxClassNames } from './useComboboxStyles.styles'; import type { ComboboxProps } from '@fluentui/react-combobox'; +import { getTabsterAttribute } from 'tabster'; describe('Combobox', () => { beforeEach(() => { @@ -1026,6 +1027,41 @@ describe('Combobox', () => { expect(listbox.getAttribute('aria-labelledby')).toEqual(null); }); + it('should update the tabster escape ignore attribute based on open state', () => { + const tabsterOpenAttr = getTabsterAttribute( + { + focusable: { + ignoreKeydown: { Escape: true }, + }, + }, + true, + ); + const tabsterClosedAttr = getTabsterAttribute( + { + focusable: { + ignoreKeydown: { Escape: false }, + }, + }, + true, + ); + + const { getByRole } = render( + + + + + , + ); + const combobox = getByRole('combobox'); + + expect(combobox.getAttribute('data-tabster')).toMatch(tabsterClosedAttr); + + // open + userEvent.click(getByRole('combobox')); + + expect(combobox.getAttribute('data-tabster')).toMatch(tabsterOpenAttr); + }); + describe('clearable', () => { it('clears the selection on a button click', () => { const { getByText, getByRole } = render( diff --git a/packages/react-components/react-combobox/library/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap b/packages/react-components/react-combobox/library/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap index 38c9549a86f228..a32d7c2e29f269 100644 --- a/packages/react-components/react-combobox/library/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap +++ b/packages/react-components/react-combobox/library/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap @@ -8,6 +8,7 @@ exports[`Combobox renders a default state 1`] = `