diff --git a/change/@fluentui-react-combobox-58e74f07-b299-41aa-bf94-ee56a0536b76.json b/change/@fluentui-react-combobox-58e74f07-b299-41aa-bf94-ee56a0536b76.json new file mode 100644 index 0000000000000..72508cc15ec67 --- /dev/null +++ b/change/@fluentui-react-combobox-58e74f07-b299-41aa-bf94-ee56a0536b76.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: allow typeable space on all comboboxes, not only freeform", + "packageName": "@fluentui/react-combobox", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx index be757cd58ef85..42b235a167397 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx +++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx @@ -497,12 +497,49 @@ describe('Combobox', () => { expect((getByRole('combobox') as HTMLInputElement).value).toEqual('Red'); - // arrow down + space + // space should select after an arrow down userEvent.keyboard('{ArrowDown} '); expect((getByRole('combobox') as HTMLInputElement).value).toEqual('Green'); }); + it('allows to input space', () => { + const { getByRole, getByText } = render( + + + + + , + ); + + const combobox = getByRole('combobox'); + + userEvent.type(combobox, 'Slice of pie'); + userEvent.type(combobox, '{Enter}'); + + expect(getByText('Slice of pie').getAttribute('aria-selected')).toEqual('true'); + expect((combobox as HTMLInputElement).value).toEqual('Slice of pie'); + }); + + it('does not select with space while typing', () => { + const onSelect = jest.fn(); + + const { getByTestId, getByRole } = render( + + + + + , + ); + + const combobox = getByTestId('combobox'); + + userEvent.type(combobox, 'abc def'); + + expect((getByRole('combobox') as HTMLInputElement).value).toEqual('abc def'); + expect(onSelect).not.toHaveBeenCalled(); + }); + it('does not select a disabled option with the keyboard', () => { const { getByTestId, getByRole } = render( diff --git a/packages/react-components/react-combobox/src/components/Combobox/useInputTriggerSlot.ts b/packages/react-components/react-combobox/src/components/Combobox/useInputTriggerSlot.ts index 9288e174383ad..cd28e80b30053 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/useInputTriggerSlot.ts +++ b/packages/react-components/react-combobox/src/components/Combobox/useInputTriggerSlot.ts @@ -150,7 +150,7 @@ export function useInputTriggerSlot( } // allow space to insert a character if freeform & the last action was typing, or if the popup is closed - if (freeform && (isTyping.current || !open) && ev.key === ' ') { + if ((isTyping.current || !open) && ev.key === ' ') { triggerFromProps?.onKeyDown?.(ev); return; }