[select] Fix remembered typeahead value when reset while closed

packages/react/src/floating-ui-react/hooks/useTypeahead.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { useStableCallback } from '@base-ui-components/utils/useStableCallback';
-import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
 import { useTimeout } from '@base-ui-components/utils/useTimeout';
-import { stopEvent } from '../utils';
-
+import { contains, stopEvent } from '../utils';
 import type { ElementProps, FloatingContext, FloatingRootContext } from '../types';
 import { EMPTY_ARRAY } from '../../utils/constants';
 
@@ -69,6 +67,7 @@ export function useTypeahead(
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
   const dataRef = store.context.dataRef;
+
   const {
     listRef,
     activeIndex,
@@ -86,15 +85,19 @@ export function useTypeahead(
   const prevIndexRef = React.useRef<number | null>(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React.useRef<number | null>(null);
 
-  useIsoLayoutEffect(() => {
+  const clear = useStableCallback(() => {
+    timeout.clear();
+    matchIndexRef.current = null;
+    stringRef.current = '';
+  });
+
+  React.useEffect(() => {
     if (open) {
-      timeout.clear();
-      matchIndexRef.current = null;
-      stringRef.current = '';
+      clear();
     }
-  }, [open, timeout]);
+  }, [open, clear]);
 
-  useIsoLayoutEffect(() => {
+  React.useEffect(() => {
     // Sync arrow key navigation but not typeahead navigation.
     if (open && stringRef.current === '') {
       prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
@@ -193,7 +196,18 @@ export function useTypeahead(
     }
   });
 
-  const reference: ElementProps['reference'] = React.useMemo(() => ({ onKeyDown }), [onKeyDown]);
+  const reference: ElementProps['reference'] = React.useMemo(
+    () => ({
+      onKeyDown,
+      onBlur(event) {
+        if (contains(store.select('floatingElement'), event.relatedTarget as Element | null)) {
+          return;
+        }
+        clear();
+      },
+    }),
+    [onKeyDown, store, clear],
+  );
 
   const floating: ElementProps['floating'] = React.useMemo(() => {
     return {

packages/react/src/select/root/SelectRoot.test.tsx

@@ -2583,4 +2583,135 @@ describe('<Select.Root />', () => {
       });
     });
   });
+
+  describe('typeahead', () => {
+    it('should reset typeahead string when the value is cleared while the trigger is focused', async () => {
+      function App() {
+        const [value, setValue] = React.useState<string | null>('A1');
+
+        return (
+          <div>
+            <button onClick={() => setValue(null)}>Reset</button>
+            <Select.Root value={value} onValueChange={setValue} modal={false}>
+              <Select.Trigger data-testid="trigger">
+                <Select.Value />
+              </Select.Trigger>
+              <Select.Portal>
+                <Select.Positioner>
+                  <Select.Popup>
+                    <Select.Item value="A1">A1</Select.Item>
+                    <Select.Item value="A2">A2</Select.Item>
+                  </Select.Popup>
+                </Select.Positioner>
+              </Select.Portal>
+            </Select.Root>
+          </div>
+        );
+      }
+
+      const { user } = await render(<App />);
+      const trigger = screen.getByTestId('trigger');
+
+      act(() => {
+        trigger.focus();
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByRole('listbox', { hidden: true })).not.to.equal(null);
+      });
+
+      fireEvent.keyDown(trigger, { key: 'A' });
+
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'A1', hidden: true })).to.have.attribute(
+          'data-selected',
+        );
+      });
+
+      await user.click(screen.getByText('Reset'));
+      await waitFor(() => {
+        expect(trigger).to.have.text('');
+      });
+
+      act(() => {
+        trigger.focus();
+      });
+
+      fireEvent.keyDown(trigger, { key: 'A' });
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'A1', hidden: true })).to.have.attribute(
+          'data-selected',
+        );
+      });
+      expect(screen.getByRole('option', { name: 'A2', hidden: true })).not.to.have.attribute(
+        'data-selected',
+      );
+    });
+
+    it('should reset typeahead when value changes to a null-value item in the list', async () => {
+      function App() {
+        const [value, setValue] = React.useState<string | null>('A1');
+
+        return (
+          <div>
+            <button onClick={() => setValue(null)}>Reset</button>
+            <Select.Root value={value} onValueChange={setValue} modal={false}>
+              <Select.Trigger data-testid="trigger">
+                <Select.Value />
+              </Select.Trigger>
+              <Select.Portal>
+                <Select.Positioner>
+                  <Select.Popup>
+                    <Select.Item value={null}>Select...</Select.Item>
+                    <Select.Item value="A1">A1</Select.Item>
+                    <Select.Item value="A2">A2</Select.Item>
+                  </Select.Popup>
+                </Select.Positioner>
+              </Select.Portal>
+            </Select.Root>
+          </div>
+        );
+      }
+
+      const { user } = await render(<App />);
+      const trigger = screen.getByTestId('trigger');
+
+      act(() => {
+        trigger.focus();
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByRole('listbox', { hidden: true })).not.to.equal(null);
+      });
+
+      fireEvent.keyDown(trigger, { key: 'A' });
+
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'A1', hidden: true })).to.have.attribute(
+          'data-selected',
+        );
+      });
+
+      await user.click(screen.getByText('Reset'));
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'Select...', hidden: true })).to.have.attribute(
+          'data-selected',
+        );
+      });
+
+      act(() => {
+        trigger.focus();
+      });
+
+      fireEvent.keyDown(trigger, { key: 'A' });
+      await waitFor(() => {
+        expect(screen.getByRole('option', { name: 'A1', hidden: true })).to.have.attribute(
+          'data-selected',
+        );
+      });
+      expect(screen.getByRole('option', { name: 'A2', hidden: true })).not.to.have.attribute(
+        'data-selected',
+      );
+    });
+  });
 });