fix: react-combobox should close on blur after clicking expand icon (m…

…icrosoft#25771)

change/@fluentui-react-combobox-a26bff07-0272-455f-8037-654737c7b44d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: Combobox should close on blur after clicking expand icon",
+  "packageName": "@fluentui/react-combobox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx

@@ -133,6 +133,25 @@ describe('Combobox', () => {
     expect(queryByRole('listbox')).toBeNull();
   });
 
+  it('closes the popup on blur/outside click after clicking on the expand icon', () => {
+    const { getByTestId, queryByRole } = render(
+      <>
+        <Combobox expandIcon={{ 'data-testid': 'icon' } as React.HTMLAttributes<HTMLSpanElement>}>
+          <Option>Red</Option>
+          <Option>Green</Option>
+          <Option>Blue</Option>
+        </Combobox>
+        <div data-testid="outside">outside</div>
+      </>,
+    );
+
+    userEvent.click(getByTestId('icon'));
+    expect(queryByRole('listbox')).not.toBeNull();
+
+    userEvent.click(getByTestId('outside'));
+    expect(queryByRole('listbox')).toBeNull();
+  });
+
   it('does not close the combobox on click with controlled open', () => {
     const { getByRole } = render(
       <Combobox open>

packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx

@@ -203,8 +203,10 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
   const { onMouseDown: onIconMouseDown, onClick: onIconClick } = state.expandIcon || {};
   const onExpandIconMouseDown = useEventCallback(
     mergeCallbacks(onIconMouseDown, () => {
-      // do not dismiss on blur when clicking the icon
-      baseState.ignoreNextBlur.current = true;
+      // do not dismiss on blur when closing via clicking the icon
+      if (open) {
+        baseState.ignoreNextBlur.current = true;
+      }
     }),
   );