fix: drawer esc keydown vueComponent#3148

zkwolf · Mar 11, 2021 · 4bc384d · 4bc384d
1 parent dced59c
commit 4bc384d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx
@@ -80,6 +80,11 @@ const Drawer = {
     }
   },
   methods: {
+    domFocus() {
+      if (this.$refs.vcDrawer) {
+        this.$refs.vcDrawer.domFocus();
+      }
+    },
     close(e) {
       this.$emit('close', e);
     },
@@ -95,9 +100,14 @@ const Drawer = {
       });
     },
     pull() {
-      this.setState({
-        _push: false,
-      });
+      this.setState(
+        {
+          _push: false,
+        },
+        () => {
+          this.domFocus();
+        },
+      );
     },
     onDestroyTransitionEnd() {
       const isDestroyOnClose = this.getDestroyOnClose();
@@ -211,6 +221,7 @@ const Drawer = {
     const prefixCls = getPrefixCls('drawer', customizePrefixCls);
 
     const vcDrawerProps = {
+      ref: 'vcDrawer',
       props: {
         ...omit(rest, [
           'closable',

diff --git a/components/vc-drawer/src/Drawer.js b/components/vc-drawer/src/Drawer.js
@@ -85,6 +85,9 @@ const Drawer = {
         this.getDefault(this.$props);
         if (open) {
           this.isOpenChange = true;
+          this.$nextTick(() => {
+            this.domFocus();
+          });
         }
         this.$forceUpdate();
       }
@@ -103,6 +106,11 @@ const Drawer = {
         });
       }
       this.preProps.open = val;
+      if (val) {
+        this.$nextTick(() => {
+          this.domFocus();
+        });
+      }
     },
     placement(val) {
       if (val !== this.preProps.placement) {
@@ -140,6 +148,11 @@ const Drawer = {
     clearTimeout(this.timeout);
   },
   methods: {
+    domFocus() {
+      if (this.dom) {
+        this.dom.focus();
+      }
+    },
     onKeyDown(e) {
       if (e.keyCode === KeyCode.ESC) {
         e.stopPropagation();