fix: prevent unwanted scrolling when dismissing via outside pointerdo…

…wn (#1752)
floating-ui · Jun 23, 2022 · 0949185 · 0949185
1 parent 1589c1d
commit 0949185
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/packages/react-dom-interactions/src/FloatingFocusManager.tsx b/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, dataRef},
+  context: {refs, nodeId, onOpenChange, dataRef, events},
   children,
   order = ['content'],
   endGuard = true,
@@ -230,6 +230,7 @@ export function FloatingFocusManager<RT extends ReferenceType = ReferenceType>({
       return;
     }
 
+    let returnFocusValue = returnFocus;
     const floating = refs.floating.current;
     const previouslyFocusedElement = activeElement(getDocument(floating));
 
@@ -239,12 +240,30 @@ 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 = () =>
     refs.domReference.current?.getAttribute('role') === 'combobox' &&

diff --git a/packages/react-dom-interactions/src/hooks/useDismiss.ts b/packages/react-dom-interactions/src/hooks/useDismiss.ts
@@ -42,12 +42,6 @@ export const useDismiss = <RT extends ReferenceType = ReferenceType>(
     );
   }, [refs]);
 
-  const focusReference = React.useCallback(() => {
-    if (isHTMLElement(refs.domReference.current)) {
-      refs.domReference.current.focus();
-    }
-  }, [refs]);
-
   React.useEffect(() => {
     if (!open || !enabled) {
       return;
@@ -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();
+        }
       }
     }
 
@@ -86,7 +83,6 @@ export const useDismiss = <RT extends ReferenceType = ReferenceType>(
 
       events.emit('dismiss');
       onOpenChangeRef.current(false);
-      focusReference();
     }
 
     function onScroll() {
@@ -135,7 +131,6 @@ export const useDismiss = <RT extends ReferenceType = ReferenceType>(
     nodeId,
     open,
     onOpenChangeRef,
-    focusReference,
     ancestorScroll,
     enabled,
     bubbles,