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;
}