feat: allow typeable space on all v9 comboboxes, not only freeform (#…

…30295)

Co-authored-by: Oleksandr Fediashov <[email protected]>

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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(
+      <Combobox open>
+        <Option>Slice of pizza</Option>
+        <Option>Slice of cake</Option>
+        <Option>Slice of pie</Option>
+      </Combobox>,
+    );
+
+    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(
+      <Combobox open data-testid="combobox" onOptionSelect={onSelect}>
+        <Option>Red</Option>
+        <Option>Green</Option>
+        <Option>Blue</Option>
+      </Combobox>,
+    );
+
+    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(
       <Combobox open data-testid="combobox">

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