[autocomplete] Fix keepHighlight focus sync (#3399)

Author: atomiks

packages/react/src/autocomplete/root/AutocompleteRoot.test.tsx

@@ -422,6 +422,44 @@ describe('<Autocomplete.Root />', () => {
       await waitFor(() => expect(apple).to.have.attribute('data-highlighted'));
       outside.remove();
     });
+
+    it('continues keyboard navigation from the kept highlight after pointer leave', async () => {
+      const { user } = await render(
+        <Autocomplete.Root items={['apple', 'banana', 'carrot']} autoHighlight keepHighlight>
+          <Autocomplete.Input />
+          <Autocomplete.Portal>
+            <Autocomplete.Positioner>
+              <Autocomplete.Popup>
+                <Autocomplete.List>
+                  {(item: string) => (
+                    <Autocomplete.Item key={item} value={item}>
+                      {item}
+                    </Autocomplete.Item>
+                  )}
+                </Autocomplete.List>
+              </Autocomplete.Popup>
+            </Autocomplete.Positioner>
+          </Autocomplete.Portal>
+        </Autocomplete.Root>,
+      );
+
+      const input = screen.getByRole<HTMLInputElement>('combobox');
+      await user.click(input);
+      await user.type(input, 'a');
+
+      const apple = await screen.findByRole('option', { name: 'apple' });
+      await waitFor(() => expect(apple).to.have.attribute('data-highlighted'));
+
+      const outside = document.createElement('div');
+      document.body.appendChild(outside);
+      fireEvent.pointerLeave(apple, { pointerType: 'mouse', relatedTarget: outside });
+
+      await user.keyboard('{ArrowDown}');
+
+      const banana = screen.getByRole('option', { name: 'banana' });
+      await waitFor(() => expect(banana).to.have.attribute('data-highlighted'));
+      outside.remove();
+    });
   });
 
   describe('prop: mode', () => {

packages/react/src/combobox/root/AriaCombobox.tsx

@@ -1052,6 +1052,7 @@ export function AriaCombobox<Value = any, Mode extends SelectionMode = 'none'>(
     focusItemOnOpen:
       queryChangedAfterOpen || (selectionMode === 'none' && !autoHighlightMode) ? false : 'auto',
     focusItemOnHover: highlightItemOnHover,
+    resetOnPointerLeave: !keepHighlight,
     // `cols` > 1 enables grid navigation.
     // Since <Combobox.Row> infers column sizes (and is required when building a grid),
     // it works correctly even with a value of `2`.
@@ -1065,10 +1066,6 @@ export function AriaCombobox<Value = any, Mode extends SelectionMode = 'none'>(
         return;
       }
 
-      if (keepHighlight && nextActiveIndex === null && event && event.type === 'pointerleave') {
-        return;
-      }
-
       if (!event) {
         setIndices({
           activeIndex: nextActiveIndex,

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

@@ -226,6 +226,11 @@ export interface UseListNavigationProps {
    * The id of the root component.
    */
   id?: string | undefined;
+  /**
+   * Whether to clear the active index when the pointer leaves an item.
+   * @default true
+   */
+  resetOnPointerLeave?: boolean;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */
@@ -269,6 +274,7 @@ export function useListNavigation(
     itemSizes,
     dense = false,
     id,
+    resetOnPointerLeave = true,
     externalTree,
   } = props;
 
@@ -322,6 +328,7 @@ export function useListNavigation(
   const latestOpenRef = useValueAsRef(open);
   const scrollItemIntoViewRef = useValueAsRef(scrollItemIntoView);
   const selectedIndexRef = useValueAsRef(selectedIndex);
+  const resetOnPointerLeaveRef = useValueAsRef(resetOnPointerLeave);
 
   const focusItem = useStableCallback(() => {
     function runFocus(item: HTMLElement) {
@@ -553,6 +560,10 @@ export function useListNavigation(
           return;
         }
 
+        if (!resetOnPointerLeaveRef.current) {
+          return;
+        }
+
         indexRef.current = -1;
         onNavigate(event);
 
@@ -563,7 +574,15 @@ export function useListNavigation(
     };
 
     return itemProps;
-  }, [latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, virtual]);
+  }, [
+    latestOpenRef,
+    floatingFocusElementRef,
+    focusItemOnHover,
+    listRef,
+    onNavigate,
+    resetOnPointerLeaveRef,
+    virtual,
+  ]);
 
   const getParentOrientation = React.useCallback(() => {
     return (