packages/dom/src/autoUpdate.ts

@@ -68,7 +68,14 @@ export function autoUpdate(
 
   let observer: ResizeObserver | null = null;
   if (elementResize) {
-    observer = new ResizeObserver(update);
+    let initialUpdate = true;
+    observer = new ResizeObserver(() => {
+      if (!initialUpdate) {
+        update();
+      }
+
+      initialUpdate = false;
+    });
     isElement(reference) && !animationFrame && observer.observe(reference);
     observer.observe(floating);
   }
@@ -97,9 +104,7 @@ export function autoUpdate(
     frameId = requestAnimationFrame(frameLoop);
   }
 
-  if (!elementResize) {
-    update();
-  }
+  update();
 
   return () => {
     ancestors.forEach((ancestor) => {

packages/react-dom-interactions/src/FloatingFocusManager.tsx

@@ -59,7 +59,7 @@ export interface Props<RT extends ReferenceType = ReferenceType> {
  * @see https://floating-ui.com/docs/FloatingFocusManager
  */
 export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>({
-  context: {refs, nodeId, onOpenChange},
+  context: {refs, nodeId, onOpenChange, dataRef, events},
   children,
   order = ['content'],
   endGuard = true,
@@ -75,13 +75,14 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>({
   const getTabbableElements = React.useCallback(() => {
     return orderRef.current
       .map((type) => {
-        if (isHTMLElement(refs.reference.current) && type === 'reference') {
-          return refs.reference.current;
+        if (type === 'reference') {
+          return refs.domReference.current;
         }
 
         if (refs.floating.current && type === 'floating') {
           return refs.floating.current;
         }
+
         if (type === 'content') {
           return Array.from(
             refs.floating.current?.querySelectorAll(SELECTOR) ?? []
@@ -92,7 +93,7 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>({
       })
       .flat()
       .filter((el) => {
-        if (el === refs.floating.current || el === refs.reference.current) {
+        if (el === refs.floating.current || el === refs.domReference.current) {
           return true;
         }
 
@@ -112,10 +113,7 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>({
     // to focusing the floating element and preventing tab navigation
     const noTabbableContentElements =
       getTabbableElements().filter(
-        (el) =>
-          el !== refs.floating.current &&
-          // @ts-expect-error
-          el !== refs.reference.current
+        (el) => el !== refs.floating.current && el !== refs.domReference.current
       ).length === 0;
 
     function onKeyDown(event: KeyboardEvent) {
@@ -135,7 +133,7 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>({
 
         if (
           orderRef.current[0] === 'reference' &&
-          target === refs.reference.current
+          target === refs.domReference.current
         ) {
           stopEvent(event);
           if (event.shiftKey) {
@@ -171,15 +169,15 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>({
         !refs.floating.current?.contains(relatedTarget);
 
       const focusMovedOutsideReference =
-        isElement(refs.reference.current) &&
-        !refs.reference.current.contains(relatedTarget);
+        isElement(refs.domReference.current) &&
+        !refs.domReference.current.contains(relatedTarget);
 
       const isChildOpen =
         tree && getChildren(tree.nodesRef.current, nodeId).length > 0;
 
       const isParentRelated =
         tree &&
-        event.currentTarget === refs.reference.current &&
+        event.currentTarget === refs.domReference.current &&
         getAncestors(tree.nodesRef.current, nodeId)?.some((node) =>
           node.context?.refs.floating.current?.contains(relatedTarget)
         );
@@ -195,7 +193,7 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>({
     }
 
     const floating = refs.floating.current;
-    const reference = refs.reference.current;
+    const reference = refs.domReference.current;
 
     if (floating && isHTMLElement(reference)) {
       !modal && floating.addEventListener('focusout', onFocusOut);
@@ -222,6 +220,7 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>({
     modal,
     onOpenChangeRef,
     orderRef,
+    dataRef,
     getTabbableElements,
     refs,
   ]);
@@ -231,6 +230,7 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>({
       return;
     }
 
+    let returnFocusValue = returnFocus;
     const floating = refs.floating.current;
     const previouslyFocusedElement = activeElement(getDocument(floating));
 
@@ -240,17 +240,34 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>({
       focus(initialFocus.current ?? floating);
     }
 
+    // Dismissing via outside `pointerdown` should always ignore `returnFocus`
+    // to prevent unwanted scrolling. The `esc` key will continue to focus the
+    // reference.
+    function onDismiss() {
+      returnFocusValue = false;
+    }
+
+    events.on('dismiss', onDismiss);
+
     return () => {
-      if (returnFocus && isHTMLElement(previouslyFocusedElement)) {
+      events.off('dismiss', onDismiss);
+
+      if (returnFocusValue && isHTMLElement(previouslyFocusedElement)) {
         focus(previouslyFocusedElement);
       }
     };
-  }, [preventTabbing, getTabbableElements, initialFocus, returnFocus, refs]);
+  }, [
+    preventTabbing,
+    getTabbableElements,
+    initialFocus,
+    returnFocus,
+    refs,
+    events,
+  ]);
 
   const isTypeableCombobox = () =>
-    isHTMLElement(refs.reference.current) &&
-    refs.reference.current.getAttribute('role') === 'combobox' &&
-    isTypeableElement(refs.reference.current);
+    refs.domReference.current?.getAttribute('role') === 'combobox' &&
+    isTypeableElement(refs.domReference.current);
 
   return (
     <>

packages/react-dom-interactions/src/hooks/useClick.ts

@@ -1,6 +1,5 @@
 import type {ElementProps, FloatingContext, ReferenceType} from '../types';
 import * as React from 'react';
-import {isHTMLElement} from '../utils/is';
 import {isTypeableElement} from '../utils/isTypeableElement';
 
 export interface Props {
@@ -26,14 +25,11 @@ export const useClick = <RT extends ReferenceType = ReferenceType>(
   const pointerTypeRef = React.useRef<'mouse' | 'pen' | 'touch'>();
 
   function isButton() {
-    return (
-      isHTMLElement(refs.reference.current) &&
-      refs.reference.current.tagName === 'BUTTON'
-    );
+    return refs.domReference.current?.tagName === 'BUTTON';
   }
 
   function isSpaceIgnored() {
-    return isTypeableElement(refs.reference.current);
+    return isTypeableElement(refs.domReference.current);
   }
 
   if (!enabled) {

packages/react-dom-interactions/src/hooks/useDismiss.ts

@@ -40,13 +40,7 @@ export const useDismiss = <RT extends ReferenceType = ReferenceType>(
     return refs.floating.current?.contains(
       activeElement(getDocument(refs.floating.current))
     );
-  }, [refs.floating]);
-
-  const focusReference = React.useCallback(() => {
-    if (isHTMLElement(refs.reference.current)) {
-      refs.reference.current.focus();
-    }
-  }, [refs.reference]);
+  }, [refs]);
 
   React.useEffect(() => {
     if (!open || !enabled) {
@@ -61,7 +55,10 @@ export const useDismiss = <RT extends ReferenceType = ReferenceType>(
 
         events.emit('dismiss');
         onOpenChangeRef.current(false);
-        focusReference();
+
+        if (isHTMLElement(refs.domReference.current)) {
+          refs.domReference.current.focus();
+        }
       }
     }
 
@@ -74,8 +71,7 @@ export const useDismiss = <RT extends ReferenceType = ReferenceType>(
 
       if (
         isEventTargetWithin(event, refs.floating.current) ||
-        (isElement(refs.reference.current) &&
-          isEventTargetWithin(event, refs.reference.current)) ||
+        isEventTargetWithin(event, refs.domReference.current) ||
         targetIsInsideChildren
       ) {
         return;
@@ -87,7 +83,6 @@ export const useDismiss = <RT extends ReferenceType = ReferenceType>(
 
       events.emit('dismiss');
       onOpenChangeRef.current(false);
-      focusReference();
     }
 
     function onScroll() {
@@ -136,13 +131,11 @@ export const useDismiss = <RT extends ReferenceType = ReferenceType>(
     nodeId,
     open,
     onOpenChangeRef,
-    focusReference,
     ancestorScroll,
     enabled,
     bubbles,
     isFocusInsideFloating,
-    refs.floating,
-    refs.reference,
+    refs,
   ]);
 
   if (!enabled) {

packages/react-dom-interactions/src/hooks/useFocus.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import type {ElementProps, FloatingContext, ReferenceType} from '../types';
 import {activeElement} from '../utils/activeElement';
 import {getDocument} from '../utils/getDocument';
-import {isElement} from '../utils/is';
 
 export interface Props {
   enabled?: boolean;
@@ -31,7 +30,7 @@ export const useFocus = <RT extends ReferenceType = ReferenceType>(
     function onBlur() {
       if (
         pointerTypeRef.current &&
-        refs.reference.current === activeElement(doc)
+        refs.domReference.current === activeElement(doc)
       ) {
         blockFocusRef.current = !open;
       }
@@ -87,8 +86,7 @@ export const useFocus = <RT extends ReferenceType = ReferenceType>(
         if (
           event.type === 'focus' &&
           dataRef.current.openEvent?.type === 'mousedown' &&
-          isElement(refs.reference.current) &&
-          refs.reference.current?.contains(
+          refs.domReference.current?.contains(
             dataRef.current.openEvent?.target as Element | null
           )
         ) {
@@ -105,8 +103,7 @@ export const useFocus = <RT extends ReferenceType = ReferenceType>(
         // Note: it must be focusable, e.g. `tabindex="-1"`.
         if (
           refs.floating.current?.contains(target) ||
-          (isElement(refs.reference.current) &&
-            refs.reference.current.contains(target))
+          refs.domReference.current?.contains(target)
         ) {
           return;
         }

packages/react-dom-interactions/src/hooks/useHover.ts

@@ -118,6 +118,7 @@ export const useHover = <RT extends ReferenceType = ReferenceType>(
           closeDelay
         );
       } else if (runElseBranch) {
+        clearTimeout(timeoutRef.current);
         onOpenChangeRef.current(false);
       }
     },
@@ -225,7 +226,7 @@ export const useHover = <RT extends ReferenceType = ReferenceType>(
     }
 
     const floating = refs.floating.current;
-    const reference = refs.reference.current;
+    const reference = refs.domReference.current;
 
     if (isElement(reference)) {
       open && reference.addEventListener('mouseleave', onScrollMouseLeave);
@@ -269,11 +270,10 @@ export const useHover = <RT extends ReferenceType = ReferenceType>(
     if (open && handleCloseRef.current) {
       getDocument(refs.floating.current).body.style.pointerEvents = 'none';
       performedPointerEventsMutationRef.current = true;
-      const reference =
-        isHTMLElement(refs.reference.current) && refs.reference.current;
+      const reference = refs.domReference.current;
       const floating = refs.floating.current;
 
-      if (reference && floating) {
+      if (isHTMLElement(reference) && floating) {
         const parentFloating = tree?.nodesRef.current.find(
           (node) => node.id === parentId
         )?.context?.refs.floating.current;
@@ -291,7 +291,7 @@ export const useHover = <RT extends ReferenceType = ReferenceType>(
         };
       }
     }
-  }, [enabled, open, parentId, refs, tree, handleCloseRef]);
+  }, [enabled, open, parentId, refs, tree, handleCloseRef, dataRef]);
 
   useLayoutEffect(() => {
     if (previousOpen && !open) {

packages/react-dom-interactions/src/hooks/useListNavigation.ts

@@ -331,11 +331,11 @@ export const useListNavigation = <RT extends ReferenceType = ReferenceType>(
       !open &&
       previousOpen &&
       selectedIndex != null &&
-      isHTMLElement(refs.reference.current)
+      isHTMLElement(refs.domReference.current)
     ) {
-      refs.reference.current.focus();
+      refs.domReference.current.focus();
     }
-  }, [refs.reference, selectedIndex, open, previousOpen, enabled]);
+  }, [refs, selectedIndex, open, previousOpen, enabled]);
 
   // Ensure the parent floating element has focus when a nested child closes
   // to allow arrow key navigation to work after the pointer leaves the child.
@@ -369,8 +369,8 @@ export const useListNavigation = <RT extends ReferenceType = ReferenceType>(
       stopEvent(event);
       onOpenChange(false);
 
-      if (isHTMLElement(refs.reference.current)) {
-        refs.reference.current.focus();
+      if (isHTMLElement(refs.domReference.current)) {
+        refs.domReference.current.focus();
       }
 
       return;

packages/react-dom-interactions/src/safePolygon.ts

@@ -1,6 +1,5 @@
 import type {Side} from '@floating-ui/core';
 import type {FloatingContext, FloatingTreeType, ReferenceType} from './types';
-import {isElement} from './utils/is';
 import {getChildren} from './utils/getChildren';
 
 type Point = [number, number];
@@ -71,8 +70,7 @@ export function safePolygon<RT extends ReferenceType = ReferenceType>({
       // is no need to run the logic.
       if (
         event.type === 'pointermove' &&
-        isElement(refs.reference.current) &&
-        refs.reference.current.contains(targetNode)
+        refs.domReference.current?.contains(targetNode)
       ) {
         return;
       }
@@ -94,7 +92,7 @@ export function safePolygon<RT extends ReferenceType = ReferenceType>({
       }
 
       if (
-        !refs.reference.current ||
+        !refs.domReference.current ||
         !refs.floating.current ||
         placement == null ||
         x == null ||
@@ -103,7 +101,7 @@ export function safePolygon<RT extends ReferenceType = ReferenceType>({
         return;
       }
 
-      const refRect = refs.reference.current.getBoundingClientRect();
+      const refRect = refs.domReference.current.getBoundingClientRect();
       const rect = refs.floating.current.getBoundingClientRect();
       const side = placement.split('-')[0] as Side;
       const cursorLeaveFromRight = x > rect.right - rect.width / 2;