chore: lock only when fixed (#530)

* chore: safe lock of content

* chore: lock only when fixed

Author: zombieJ

src/Dialog/Content/Panel.tsx

@@ -13,6 +13,8 @@ export interface PanelProps extends Omit<IDialogPropTypes, 'getOpenCount'> {
   onMouseDown?: React.MouseEventHandler;
   onMouseUp?: React.MouseEventHandler;
   holderRef?: React.Ref<HTMLDivElement>;
+  /** Used for focus lock. When true and open, focus will lock into the panel */
+  isFixedPos?: boolean;
 }
 
 export type PanelRef = {
@@ -43,14 +45,15 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
     height,
     classNames: modalClassNames,
     styles: modalStyles,
+    isFixedPos,
   } = props;
 
   // ================================= Refs =================================
   const { panel: panelRef } = React.useContext(RefContext);
   const internalRef = useRef<HTMLDivElement>(null);
   const mergedRef = useComposeRef(holderRef, panelRef, internalRef);
 
-  useLockFocus(visible, () => internalRef.current);
+  useLockFocus(visible && isFixedPos, () => internalRef.current);
 
   React.useImperativeHandle(ref, () => ({
     focus: () => {

src/Dialog/index.tsx

@@ -59,6 +59,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
   const contentRef = useRef<ContentRef>(null);
 
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
+  const [isFixedPos, setIsFixedPos] = React.useState(false);
 
   // ========================== Init ==========================
   const ariaId = useId();
@@ -116,7 +117,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
   const contentClickRef = useRef(false);
   const contentTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
 
-  // We need record content click incase content popup out of dialog
+  // We need record content click in case content popup out of dialog
   const onContentMouseDown: React.MouseEventHandler = () => {
     clearTimeout(contentTimeoutRef.current);
     contentClickRef.current = true;
@@ -154,6 +155,12 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
     if (visible) {
       setAnimatedVisible(true);
       saveLastOutSideActiveElementRef();
+
+      // Calc the position style
+      if (wrapperRef.current) {
+        const computedWrapStyle = getComputedStyle(wrapperRef.current);
+        setIsFixedPos(computedWrapStyle.position === 'fixed');
+      }
     } else if (
       animatedVisible &&
       contentRef.current.enableMotion() &&
@@ -203,6 +210,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
       >
         <Content
           {...props}
+          isFixedPos={isFixedPos}
           onMouseDown={onContentMouseDown}
           onMouseUp={onContentMouseUp}
           ref={contentRef}

tests/focus.spec.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
+import React from 'react';
+import { act, render } from '@testing-library/react';
+import Dialog from '../src';
+
+// Mock: import { useLockFocus } from '@rc-component/util/lib/Dom/focus';
+jest.mock('@rc-component/util/lib/Dom/focus', () => {
+  const actual = jest.requireActual('@rc-component/util/lib/Dom/focus');
+
+  const useLockFocus = (visible: boolean, ...rest: any[]) => {
+    globalThis.__useLockFocusVisible = visible;
+    return actual.useLockFocus(visible, ...rest);
+  };
+
+  return {
+    ...actual,
+    useLockFocus,
+  };
+});
+
+/**
+ * Since overflow scroll test need a clear env which may affect by other test.
+ * Use a clean env instead.
+ */
+describe('Dialog.Focus', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('Should lock when fixed', () => {
+    render(
+      <Dialog
+        visible
+        styles={{
+          wrapper: { position: 'fixed' },
+        }}
+      />,
+    );
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(globalThis.__useLockFocusVisible).toBe(true);
+  });
+
+  it('Should not lock when not fixed', () => {
+    render(
+      <Dialog
+        visible
+        styles={{
+          wrapper: { position: 'absolute' },
+        }}
+      />,
+    );
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(globalThis.__useLockFocusVisible).toBe(false);
+  });
+});