fix(ui): change focus after visible change

Author: xiejay97

packages/ui/src/components/drawer/Drawer.tsx

@@ -169,18 +169,6 @@ export const DDrawer: {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
-  useEffect(() => {
-    if (visible) {
-      dataRef.current.prevActiveEl = document.activeElement as HTMLElement | null;
-
-      if (drawerRef.current) {
-        drawerRef.current.focus({ preventScroll: true });
-      }
-    } else if (dataRef.current.prevActiveEl) {
-      dataRef.current.prevActiveEl.focus({ preventScroll: true });
-    }
-  }, [visible]);
-
   const transitionStyles: Partial<Record<DTransitionState, React.CSSProperties>> = (() => {
     const transform =
       dPlacement === 'top'
@@ -237,9 +225,18 @@ export const DDrawer: {
         dDestroyWhenLeaved={dDestroyAfterClose}
         afterEnter={() => {
           afterVisibleChange?.(true);
+
+          dataRef.current.prevActiveEl = document.activeElement as HTMLElement | null;
+          if (drawerRef.current) {
+            drawerRef.current.focus({ preventScroll: true });
+          }
         }}
         afterLeave={() => {
           afterVisibleChange?.(false);
+
+          if (dataRef.current.prevActiveEl) {
+            dataRef.current.prevActiveEl.focus({ preventScroll: true });
+          }
         }}
       >
         {(state) => (

packages/ui/src/components/image/ImagePreview.tsx

@@ -1,5 +1,5 @@
 import { isUndefined } from 'lodash';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import { useEvent, useImmer, useIsomorphicLayoutEffect, useLockScroll, useRefExtra } from '@react-devui/hooks';
@@ -142,18 +142,6 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null {
 
   useLockScroll(visible);
 
-  useEffect(() => {
-    if (visible) {
-      dataRef.current.prevActiveEl = document.activeElement as HTMLElement | null;
-
-      if (previewRef.current) {
-        previewRef.current.focus({ preventScroll: true });
-      }
-    } else if (dataRef.current.prevActiveEl) {
-      dataRef.current.prevActiveEl.focus({ preventScroll: true });
-    }
-  }, [visible]);
-
   const listenDragEvent = visible && isDragging;
 
   useEvent<TouchEvent>(
@@ -237,9 +225,18 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null {
         dDestroyWhenLeaved
         afterEnter={() => {
           afterVisibleChange?.(true);
+
+          dataRef.current.prevActiveEl = document.activeElement as HTMLElement | null;
+          if (previewRef.current) {
+            previewRef.current.focus({ preventScroll: true });
+          }
         }}
         afterLeave={() => {
           afterVisibleChange?.(false);
+
+          if (dataRef.current.prevActiveEl) {
+            dataRef.current.prevActiveEl.focus({ preventScroll: true });
+          }
         }}
       >
         {(state) => {

packages/ui/src/components/modal/Modal.tsx

@@ -2,7 +2,7 @@ import type { DModalFooterPrivateProps } from './ModalFooter';
 import type { DModalHeaderPrivateProps } from './ModalHeader';
 
 import { isNumber, isString, isUndefined } from 'lodash';
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import ReactDOM from 'react-dom';
 
 import { useId, useLockScroll, useRefExtra } from '@react-devui/hooks';
@@ -108,18 +108,6 @@ export const DModal: {
 
   useLockScroll(visible);
 
-  useEffect(() => {
-    if (visible) {
-      dataRef.current.prevActiveEl = document.activeElement as HTMLElement | null;
-
-      if (modalRef.current) {
-        modalRef.current.focus({ preventScroll: true });
-      }
-    } else if (dataRef.current.prevActiveEl) {
-      dataRef.current.prevActiveEl.focus({ preventScroll: true });
-    }
-  }, [visible]);
-
   const headerNode = (() => {
     if (dHeader) {
       const node = isString(dHeader) ? <DModalHeader>{dHeader}</DModalHeader> : dHeader;
@@ -151,9 +139,18 @@ export const DModal: {
         }}
         afterEnter={() => {
           afterVisibleChange?.(true);
+
+          dataRef.current.prevActiveEl = document.activeElement as HTMLElement | null;
+          if (modalRef.current) {
+            modalRef.current.focus({ preventScroll: true });
+          }
         }}
         afterLeave={() => {
           afterVisibleChange?.(false);
+
+          if (dataRef.current.prevActiveEl) {
+            dataRef.current.prevActiveEl.focus({ preventScroll: true });
+          }
         }}
       >
         {(state) => {

packages/ui/src/components/popover/Popover.tsx

@@ -4,7 +4,7 @@ import type { DRefExtra } from '@react-devui/hooks/useRefExtra';
 import type { DPopupPlacement } from '@react-devui/utils/position';
 
 import { isString, isUndefined } from 'lodash';
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useImperativeHandle, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import { useEvent, useEventCallback, useId, useLockScroll, useRefExtra } from '@react-devui/hooks';
@@ -246,20 +246,6 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef<DPopoverRef>): JS
     !dEscClosable || !visible
   );
 
-  useEffect(() => {
-    if (dModal) {
-      if (visible) {
-        dataRef.current.prevActiveEl = document.activeElement as HTMLElement | null;
-
-        if (popoverRef.current) {
-          popoverRef.current.focus({ preventScroll: true });
-        }
-      } else if (dataRef.current.prevActiveEl) {
-        dataRef.current.prevActiveEl.focus({ preventScroll: true });
-      }
-    }
-  }, [dModal, visible]);
-
   const headerNode = (() => {
     if (dHeader) {
       const node = isString(dHeader) ? <DPopoverHeader>{dHeader}</DPopoverHeader> : dHeader;
@@ -311,9 +297,20 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef<DPopoverRef>): JS
                 onEnter={updatePosition}
                 afterEnter={() => {
                   afterVisibleChange?.(true);
+
+                  if (dModal) {
+                    dataRef.current.prevActiveEl = document.activeElement as HTMLElement | null;
+                    if (popoverRef.current) {
+                      popoverRef.current.focus({ preventScroll: true });
+                    }
+                  }
                 }}
                 afterLeave={() => {
                   afterVisibleChange?.(false);
+
+                  if (dModal && dataRef.current.prevActiveEl) {
+                    dataRef.current.prevActiveEl.focus({ preventScroll: true });
+                  }
                 }}
               >
                 {(state) => {