fix: Portal not lock screen when container is not body

Author: zombieJ

src/Portal.tsx

@@ -59,8 +59,6 @@ export default function Portal(props: PortalProps) {
 
   const [mergedRender, setMergedRender] = React.useState(open);
 
-  useScrollLocker(autoLock && open);
-
   // ====================== Should Render ======================
   React.useEffect(() => {
     if (autoDestroy || open) {
@@ -86,6 +84,15 @@ export default function Portal(props: PortalProps) {
   );
   const mergedContainer = innerContainer ?? defaultContainer;
 
+  // ========================= Locker ==========================
+  useScrollLocker(
+    autoLock &&
+      open &&
+      canUseDom() &&
+      (mergedContainer === defaultContainer ||
+        mergedContainer === document.body),
+  );
+
   // ========================= Render ==========================
   // Do not render when nothing need render
   // When innerContainer is `undefined`, it may not ready since user use ref in the same render

src/useScrollLocker.tsx

@@ -8,7 +8,9 @@ const UNIQUE_ID = `rc-util-locker-${Date.now()}`;
 
 let uuid = 0;
 
-export default function useScrollLocker(lock?: boolean) {
+export default function useScrollLocker(
+  lock?: boolean,
+) {
   const mergedLock = !!lock;
   const [id] = React.useState(() => {
     uuid += 1;

tests/index.test.tsx

@@ -126,6 +126,32 @@ describe('Portal', () => {
         overflowY: 'hidden',
       });
     });
+
+    it('not lock screen when getContainer is not body', () => {
+      const div = document.createElement('div');
+      document.body.appendChild(div);
+      render(
+        <Portal open autoLock getContainer={() => div}>
+          Bamboo
+        </Portal>,
+      );
+
+      expect(document.body).not.toHaveStyle({
+        overflowY: 'hidden',
+      });
+    });
+
+    it('lock when getContainer give document.body', () => {
+      render(
+        <Portal open autoLock getContainer={() => document.body}>
+          Bamboo
+        </Portal>,
+      );
+
+      expect(document.body).toHaveStyle({
+        overflowY: 'hidden',
+      });
+    });
   });
 
   it('autoDestroy', () => {