chore: lock only when fixed

Author: zombieJ

src/Dialog/index.tsx

@@ -59,7 +59,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
   const contentRef = useRef<ContentRef>(null);
 
   const [animatedVisible, setAnimatedVisible] = React.useState(visible);
-  const [isFixedPos, setIsFixedPos] = React.useState(true);
+  const [isFixedPos, setIsFixedPos] = React.useState(false);
 
   // ========================== Init ==========================
   const ariaId = useId();
@@ -117,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;
@@ -159,7 +159,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
       // Calc the position style
       if (wrapperRef.current) {
         const computedWrapStyle = getComputedStyle(wrapperRef.current);
-        setIsFixedPos(computedWrapStyle.position === 'absolute');
+        setIsFixedPos(computedWrapStyle.position === 'fixed');
       }
     } else if (
       animatedVisible &&

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);
+  });
+});