fix(useListNavigation): correct scrollIntoView and focus behavior…

… with virtual focus and inner focused element (#2911)
floating-ui · May 19, 2024 · 197f1fd · 197f1fd
1 parent d7f76f6
commit 197f1fd
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 26 deletions.
diff --git a/.changeset/proud-suits-kiss.md b/.changeset/proud-suits-kiss.md
@@ -0,0 +1,5 @@
+---
+"@floating-ui/react": patch
+---
+
+fix(useListNavigation): correct `scrollIntoView` and `focus` behavior with virtual focus and inner DOM-focused element + `FloatingList`
diff --git a/packages/react/src/hooks/useListNavigation.ts b/packages/react/src/hooks/useListNavigation.ts
@@ -319,35 +319,47 @@ export function useListNavigation(
       indexRef: React.MutableRefObject<number>,
       forceScrollIntoView = false,
     ) => {
-      const item = listRef.current[indexRef.current];
+      function runFocus(item: HTMLElement) {
+        if (virtual) {
+          setActiveId(item.id);
+          tree?.events.emit('virtualfocus', item);
+          if (virtualItemRef) {
+            virtualItemRef.current = item;
+          }
+        } else {
+          enqueueFocus(item, {
+            preventScroll: true,
+            // Mac Safari does not move the virtual cursor unless the focus call
+            // is sync. However, for the very first focus call, we need to wait
+            // for the position to be ready in order to prevent unwanted
+            // scrolling. This means the virtual cursor will not move to the first
+            // item when first opening the floating element, but will on
+            // subsequent calls. `preventScroll` is supported in modern Safari,
+            // so we can use that instead.
+            // iOS Safari must be async or the first item will not be focused.
+            sync:
+              isMac() && isSafari()
+                ? isPreventScrollSupported || forceSyncFocus.current
+                : false,
+          });
+        }
+      }
 
-      if (!item) return;
+      const initialItem = listRef.current[indexRef.current];
 
-      if (virtual) {
-        setActiveId(item.id);
-        tree?.events.emit('virtualfocus', item);
-        if (virtualItemRef) {
-          virtualItemRef.current = item;
-        }
-      } else {
-        enqueueFocus(item, {
-          preventScroll: true,
-          // Mac Safari does not move the virtual cursor unless the focus call
-          // is sync. However, for the very first focus call, we need to wait
-          // for the position to be ready in order to prevent unwanted
-          // scrolling. This means the virtual cursor will not move to the first
-          // item when first opening the floating element, but will on
-          // subsequent calls. `preventScroll` is supported in modern Safari,
-          // so we can use that instead.
-          // iOS Safari must be async or the first item will not be focused.
-          sync:
-            isMac() && isSafari()
-              ? isPreventScrollSupported || forceSyncFocus.current
-              : false,
-        });
+      if (initialItem) {
+        runFocus(initialItem);
       }
 
       requestAnimationFrame(() => {
+        const waitedItem = listRef.current[indexRef.current] || initialItem;
+
+        if (!waitedItem) return;
+
+        if (!initialItem) {
+          runFocus(waitedItem);
+        }
+
         const scrollIntoViewOptions = scrollItemIntoViewRef.current;
         const shouldScrollIntoView =
           scrollIntoViewOptions &&
@@ -357,7 +369,7 @@ export function useListNavigation(
         if (shouldScrollIntoView) {
           // JSDOM doesn't support `.scrollIntoView()` but it's widely supported
           // by all browsers.
-          item.scrollIntoView?.(
+          waitedItem.scrollIntoView?.(
             typeof scrollIntoViewOptions === 'boolean'
               ? {block: 'nearest', inline: 'nearest'}
               : scrollIntoViewOptions,
@@ -919,7 +931,7 @@ export function useListNavigation(
           }
         },
         onFocus() {
-          if (open) {
+          if (open && !virtual) {
             onNavigate(null);
           }
         },