fix: Combobox v9 opens popup when typing in input (#25769)

microsoft · Dec 2, 2022 · d1c530b · d1c530b
1 parent e19f11c
commit d1c530b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/change/@fluentui-react-combobox-9785fc76-eef9-4040-a5e7-31442cdb4644.json b/change/@fluentui-react-combobox-9785fc76-eef9-4040-a5e7-31442cdb4644.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: open Combobox popup when typing",
+  "packageName": "@fluentui/react-combobox",
+  "email": "[email protected]",
+  "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
@@ -118,6 +118,22 @@ describe('Combobox', () => {
     expect(getByRole('listbox')).not.toBeNull();
   });
 
+  it('opens the popup when typing', () => {
+    const { getByRole } = render(
+      <Combobox>
+        <Option>Red</Option>
+        <Option>Green</Option>
+        <Option>Blue</Option>
+      </Combobox>,
+    );
+
+    userEvent.tab();
+    userEvent.keyboard('xyz');
+
+    expect(getByRole('listbox')).not.toBeNull();
+    expect(getByRole('combobox').getAttribute('aria-expanded')).toEqual('true');
+  });
+
   it('closes the popup on expand icon click', () => {
     const { getByTestId, queryByRole } = render(
       <Combobox defaultOpen expandIcon={{ 'data-testid': 'icon' } as React.HTMLAttributes<HTMLSpanElement>}>
@@ -618,7 +634,7 @@ describe('Combobox', () => {
     );
 
     userEvent.tab();
-    userEvent.keyboard('gr');
+    userEvent.keyboard('xyz');
     userEvent.tab();
 
     expect((getByRole('combobox') as HTMLInputElement).value).toEqual('');

diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
@@ -7,6 +7,7 @@ import {
   useEventCallback,
   useMergedRefs,
 } from '@fluentui/react-utilities';
+import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
 import { useComboboxPopup } from '../../utils/useComboboxPopup';
 import { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';
@@ -140,6 +141,13 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
     }
   };
 
+  // open Combobox when typing
+  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!open && getDropdownActionFromKey(ev) === 'Type') {
+      setOpen(ev, true);
+    }
+  };
+
   // resolve input and listbox slot props
   let triggerSlot: Slot<'input'>;
   let listboxSlot: Slot<typeof Listbox> | undefined;
@@ -156,6 +164,7 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
 
   triggerSlot.onChange = mergeCallbacks(triggerSlot.onChange, onTriggerChange);
   triggerSlot.onBlur = mergeCallbacks(triggerSlot.onBlur, onTriggerBlur);
+  triggerSlot.onKeyDown = mergeCallbacks(triggerSlot.onKeyDown, onTriggerKeyDown);
 
   // only resolve listbox slot if needed
   listboxSlot =