fix: drawer order esc (#396)

Author: zombieJ

docs/examples/multiple.tsx

@@ -27,9 +27,9 @@ class Demo extends React.Component {
       openChild: !this.state.openChild,
     });
   };
-  public onChildrenClick = () => {
+  public onChildrenClick = e => {
     this.setState({
-      openChildren: !this.state.openChildren,
+      openChildren: e.currentTarget instanceof HTMLButtonElement,
     });
   };
 
@@ -55,6 +55,7 @@ class Demo extends React.Component {
           className="drawer1"
           placement="right"
           push={{ distance: 64 }}
+          rootClassName="level-0"
           // zIndex={99999}
           {...motionProps}
         >
@@ -66,6 +67,7 @@ class Demo extends React.Component {
               className="drawer2"
               placement="right"
               // zIndex={88888}
+              rootClassName="level-1"
               {...motionProps}
             >
               <div style={{ width: 200 }}>
@@ -75,6 +77,7 @@ class Demo extends React.Component {
                   open={this.state.openChildren}
                   onClose={this.onChildrenClick}
                   placement="right"
+                  rootClassName="level-2"
                   {...motionProps}
                 >
                   <div style={{ width: 200 }}>三级抽屉</div>

src/Drawer.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Portal from '@rc-component/portal';
 import type { PortalProps } from '@rc-component/portal';
+import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import DrawerPopup from './DrawerPopup';
 import type { DrawerPopupProps } from './DrawerPopup';
 import { warnCheck } from './util';
@@ -39,11 +40,29 @@ const Drawer: React.FC<DrawerProps> = props => {
     warnCheck(props);
   }
 
+  // ============================ Focus =============================
+  const panelRef = React.useRef<HTMLDivElement>();
+
+  const lastActiveRef = React.useRef<HTMLElement>();
+  useLayoutEffect(() => {
+    if (open) {
+      lastActiveRef.current = document.activeElement as HTMLElement;
+    }
+  }, [open]);
+
   // ============================= Open =============================
   const internalAfterOpenChange: DrawerProps['afterOpenChange'] =
     nextVisible => {
       setAnimatedVisible(nextVisible);
       afterOpenChange?.(nextVisible);
+
+      if (
+        !nextVisible &&
+        lastActiveRef.current &&
+        !panelRef.current?.contains(lastActiveRef.current)
+      ) {
+        lastActiveRef.current?.focus();
+      }
     };
 
   // ============================ Render ============================
@@ -63,6 +82,7 @@ const Drawer: React.FC<DrawerProps> = props => {
     maskClosable,
     inline: getContainer === false,
     afterOpenChange: internalAfterOpenChange,
+    ref: panelRef,
   };
 
   return (

src/DrawerPopup.tsx

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import type { CSSMotionProps } from 'rc-motion';
 import DrawerPanel from './DrawerPanel';
-// import type ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
 import DrawerContext from './context';
 import type { DrawerContextProps } from './context';
 import KeyCode from 'rc-util/lib/KeyCode';
@@ -63,7 +62,7 @@ export interface DrawerPopupProps {
   ) => void;
 }
 
-export default function DrawerPopup(props: DrawerPopupProps) {
+function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
   const {
     prefixCls,
     open,
@@ -105,6 +104,8 @@ export default function DrawerPopup(props: DrawerPopupProps) {
   const sentinelStartRef = React.useRef<HTMLDivElement>();
   const sentinelEndRef = React.useRef<HTMLDivElement>();
 
+  React.useImperativeHandle(ref, () => panelRef.current);
+
   const onPanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
     const { keyCode, shiftKey } = event;
 
@@ -127,6 +128,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
       // Close
       case KeyCode.ESC: {
         if (onClose && keyboard) {
+          event.stopPropagation();
           onClose(event);
         }
         break;
@@ -140,7 +142,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     if (open && autoFocus) {
       panelRef.current?.focus({ preventScroll: true });
     }
-  }, [open, autoFocus]);
+  }, [open]);
 
   // ============================ Push ============================
   const [pushed, setPushed] = React.useState(false);
@@ -332,3 +334,11 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     </DrawerContext.Provider>
   );
 }
+
+const RefDrawerPopup = React.forwardRef(DrawerPopup);
+
+if (process.env.NODE_ENV !== 'production') {
+  RefDrawerPopup.displayName = 'DrawerPopup';
+}
+
+export default RefDrawerPopup;