From 38b6a76ef54c02106cf10d989922fbcc9d2cfb31 Mon Sep 17 00:00:00 2001
From: Sarah Higley <smhigley@users.noreply.github.com>
Date: Fri, 12 Jan 2024 03:38:34 -0800
Subject: [PATCH] feat: allow typeable space on all v9 comboboxes, not only
 freeform (#30295)

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
---
 ...-58e74f07-b299-41aa-bf94-ee56a0536b76.json |  7 ++++
 .../src/components/Combobox/Combobox.test.tsx | 39 ++++++++++++++++++-
 .../Combobox/useInputTriggerSlot.ts           |  2 +-
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-combobox-58e74f07-b299-41aa-bf94-ee56a0536b76.json

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 00000000000000..72508cc15ec679
--- /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 be757cd58ef857..42b235a167397b 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(
+      <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">
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 9288e174383ad0..cd28e80b30053e 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;
     }