fix(compact-select): Select current search result on Enter

Recompute the current first visible search result when Enter is pressed instead of reading the search-focused key from a later effect. This prevents Enter from selecting a stale option when the query changes and the previous active key remains visible.

Add a regression test for Enter immediately after a search query update.

Co-Authored-By: OpenAI Codex <noreply@openai.com>

Author: nsdeschenes

static/app/components/core/compactSelect/compactSelect.spec.tsx

@@ -503,6 +503,46 @@ describe('CompactSelect', () => {
       expect(searchInput).not.toHaveAttribute('aria-activedescendant');
     });
 
+    it('selects the current first search result when Enter follows a query update', async () => {
+      const mock = jest.fn();
+
+      render(
+        <CompactSelect
+          search={{
+            placeholder: 'Search here…',
+            filter: (option, search) => {
+              if (search === 'a') {
+                return {score: option.value === 'alpha' ? 2 : 1};
+              }
+              if (search === 'ab') {
+                return {score: option.value === 'beta' ? 2 : 1};
+              }
+              return {score: 0};
+            },
+          }}
+          options={[
+            {value: 'alpha', label: 'Alpha'},
+            {value: 'beta', label: 'Beta'},
+          ]}
+          value={undefined}
+          onChange={mock}
+        />
+      );
+
+      await userEvent.click(screen.getByRole('button'));
+      const searchInput = screen.getByPlaceholderText('Search here…');
+      await userEvent.type(searchInput, 'a');
+
+      expect(searchInput).toHaveAttribute(
+        'aria-activedescendant',
+        screen.getByRole('option', {name: 'Alpha'}).id
+      );
+
+      await userEvent.keyboard('b{Enter}');
+
+      expect(mock).toHaveBeenCalledWith({value: 'beta', label: 'Beta'});
+    });
+
     it('does not select the first search result when autoFocusFirstResult is false', async () => {
       const mock = jest.fn();
 

static/app/components/core/compactSelect/control.tsx

@@ -65,10 +65,15 @@ interface SearchResult {
 interface SearchResultListController {
   clearFocusedKey: () => void;
   getFirstVisibleEnabledSearchResult: () => SearchResult | null;
-  selectFocusedKey: () => boolean;
+  selectFocusedKey: (key: SelectKey) => boolean;
   setFocusedKey: (key: SelectKey) => void;
 }
 
+interface SearchResultTarget {
+  controller: SearchResultListController;
+  searchResult: SearchResult;
+}
+
 interface ControlContextValue {
   overlayIsOpen: boolean;
   /**
@@ -292,30 +297,44 @@ export function Control({
     }
   }, []);
 
-  const focusFirstSearchResult = useCallback(() => {
-    if (!searchEnabled || !autoFocusFirstResult || !searchInputValue) {
-      clearFocusedSearchResult();
-      return;
+  const getFirstVisibleEnabledSearchResultTarget = useCallback(() => {
+    for (const controller of searchResultListControllersRef.current) {
+      const searchResult = controller.getFirstVisibleEnabledSearchResult();
+      if (searchResult !== null) {
+        return {controller, searchResult};
+      }
     }
+    return null;
+  }, []);
 
-    const target = searchResultListControllersRef.current
-      .map(controller => ({
-        controller,
-        searchResult: controller.getFirstVisibleEnabledSearchResult(),
-      }))
-      .find(({searchResult}) => searchResult !== null);
-
+  const focusSearchResultTarget = useCallback((target: SearchResultTarget | null) => {
     activeSearchResultListControllerRef.current = target?.controller ?? null;
-    setActiveSearchResultId(target?.searchResult?.id);
+    setActiveSearchResultId(target?.searchResult.id);
 
     for (const controller of searchResultListControllersRef.current) {
-      if (controller === target?.controller && target.searchResult !== null) {
+      if (controller === target?.controller) {
         controller.setFocusedKey(target.searchResult.key);
       } else {
         controller.clearFocusedKey();
       }
     }
-  }, [autoFocusFirstResult, clearFocusedSearchResult, searchEnabled, searchInputValue]);
+  }, []);
+
+  const focusFirstSearchResult = useCallback(() => {
+    if (!searchEnabled || !autoFocusFirstResult || !searchInputValue) {
+      clearFocusedSearchResult();
+      return;
+    }
+
+    focusSearchResultTarget(getFirstVisibleEnabledSearchResultTarget());
+  }, [
+    autoFocusFirstResult,
+    clearFocusedSearchResult,
+    focusSearchResultTarget,
+    getFirstVisibleEnabledSearchResultTarget,
+    searchEnabled,
+    searchInputValue,
+  ]);
 
   const registerSearchResultList = useCallback(
     (controller: SearchResultListController) => {
@@ -341,14 +360,22 @@ export function Control({
       return false;
     }
 
-    if (activeSearchResultListControllerRef.current?.selectFocusedKey()) {
-      return true;
+    const target = getFirstVisibleEnabledSearchResultTarget();
+    if (target === null) {
+      clearFocusedSearchResult();
+      return false;
     }
 
-    return searchResultListControllersRef.current.some(controller =>
-      controller.selectFocusedKey()
-    );
-  }, [autoFocusFirstResult, searchEnabled, searchInputValue]);
+    focusSearchResultTarget(target);
+    return target.controller.selectFocusedKey(target.searchResult.key);
+  }, [
+    autoFocusFirstResult,
+    clearFocusedSearchResult,
+    focusSearchResultTarget,
+    getFirstVisibleEnabledSearchResultTarget,
+    searchEnabled,
+    searchInputValue,
+  ]);
 
   const updateSearch = (newValue: string) => {
     normalizedSearch?.onChange?.(newValue);

static/app/components/core/compactSelect/list.tsx

@@ -326,21 +326,16 @@ export function List<Value extends SelectKey>({
   firstVisibleEnabledSearchResultRef.current = firstVisibleEnabledSearchResult;
   const hiddenOptionsRef = useRef(hiddenOptions);
   hiddenOptionsRef.current = hiddenOptions;
-  const searchFocusedKeyRef = useRef(searchFocusedKey);
-  searchFocusedKeyRef.current = searchFocusedKey;
-
   const searchResultListController = useMemo(
     () => ({
       clearFocusedKey: () => {
         setSearchFocusedKey(null);
       },
       getFirstVisibleEnabledSearchResult: () =>
         firstVisibleEnabledSearchResultRef.current,
-      selectFocusedKey: () => {
+      selectFocusedKey: (focusedKey: SelectKey) => {
         const selectionManager = listStateRef.current.selectionManager;
-        const focusedKey = searchFocusedKeyRef.current;
         if (
-          focusedKey === null ||
           hiddenOptionsRef.current.has(focusedKey) ||
           selectionManager.isDisabled(focusedKey)
         ) {