fix: drawer esc keydown #3148

components/drawer/index.tsx

@@ -85,6 +85,11 @@ const Drawer = defineComponent({
     }
   },
   methods: {
+    domFocus() {
+      if (this.$refs.vcDrawer) {
+        (this.$refs.vcDrawer as any).domFocus();
+      }
+    },
     close(e: Event) {
       this.$emit('update:visible', false);
       this.$emit('close', e);
@@ -101,9 +106,14 @@ const Drawer = defineComponent({
       });
     },
     pull() {
-      this.setState({
-        sPush: false,
-      });
+      this.setState(
+        {
+          sPush: false,
+        },
+        () => {
+          this.domFocus();
+        },
+      );
     },
     onDestroyTransitionEnd() {
       const isDestroyOnClose = this.getDestroyOnClose();
@@ -248,6 +258,7 @@ const Drawer = defineComponent({
         [haveMask]: !!haveMask,
       }),
       wrapStyle: this.getRcDrawerStyle(),
+      ref: 'vcDrawer',
     };
     return <VcDrawer {...vcDrawerProps}>{this.renderBody(prefixCls)}</VcDrawer>;
   },

components/menu/SubMenu.tsx

@@ -31,7 +31,7 @@ export default defineComponent({
 
   render() {
     const { $slots, $attrs } = this;
-    const { rootPrefixCls, popupClassName } = {...this.$props, ...this.injectExtraProps} as any;
+    const { rootPrefixCls, popupClassName } = { ...this.$props, ...this.injectExtraProps } as any;
     const { theme: antdMenuTheme } = this.menuPropsContext;
     const props = {
       ...this.$props,

components/vc-drawer/src/Drawer.js

@@ -77,6 +77,11 @@ const Drawer = defineComponent({
         });
       }
       this.preProps.open = val;
+      if (val) {
+        nextTick(() => {
+          this.domFocus();
+        });
+      }
     },
     placement(val) {
       if (val !== this.preProps.placement) {
@@ -113,6 +118,9 @@ const Drawer = defineComponent({
         this.getDefault(this.$props);
         if (open) {
           this.isOpenChange = true;
+          nextTick(() => {
+            this.domFocus();
+          });
         }
         this.$forceUpdate();
       }
@@ -140,6 +148,11 @@ const Drawer = defineComponent({
     clearTimeout(this.timeout);
   },
   methods: {
+    domFocus() {
+      if (this.dom) {
+        this.dom.focus();
+      }
+    },
     onKeyDown(e) {
       if (e.keyCode === KeyCode.ESC) {
         e.stopPropagation();