From 5980e46465f436d30fd36c96fd03613b9c9cc29a Mon Sep 17 00:00:00 2001
From: sinbadmaster <bless_lee@126.com>
Date: Mon, 11 Dec 2023 11:13:26 +0800
Subject: [PATCH] =?UTF-8?q?fix(dialog):=20=E4=BF=AE=E6=94=B9=E9=94=AE?=
 =?UTF-8?q?=E7=9B=98=E4=BA=8B=E4=BB=B6=E7=BB=91=E5=AE=9A=E5=AF=B9=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closed #3636
---
 src/dialog/dialog.tsx | 32 ++++++++++++++++++++------------
 src/drawer/drawer.tsx | 19 +++++++++++--------
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
index 12942cc660..07d688b0d3 100644
--- a/src/dialog/dialog.tsx
+++ b/src/dialog/dialog.tsx
@@ -185,6 +185,7 @@ export default defineComponent({
       return !isFullScreen.value ? { width: GetCSSValue(props.width) } : {}; // width全屏模式不生效
     });
 
+    const divRef = ref<HTMLDivElement>();
     watch(
       () => props.visible,
       (value) => {
@@ -204,11 +205,14 @@ export default defineComponent({
           }
           // 清除鼠标焦点 避免entry事件多次触发（按钮弹出弹窗 不移除焦点 立即按Entry按键 会造成弹窗关闭再弹出）
           (document.activeElement as HTMLElement)?.blur();
+          // 获取焦点到当前dialog上
+          nextTick(() => {
+            divRef.value?.focus?.();
+          });
         } else {
           clearStyleFunc();
         }
         storeUid(value);
-        addKeyboardEvent(value);
       },
     );
 
@@ -232,17 +236,11 @@ export default defineComponent({
       }
     };
 
-    const addKeyboardEvent = (status: boolean) => {
-      if (status) {
-        document.addEventListener('keydown', keyboardEvent);
-        props.confirmOnEnter && document.addEventListener('keydown', keyboardEnterEvent);
-      } else {
-        document.removeEventListener('keydown', keyboardEvent);
-        props.confirmOnEnter && document.removeEventListener('keydown', keyboardEnterEvent);
-      }
-    };
     // 回车出发确认事件
     const keyboardEnterEvent = (e: KeyboardEvent) => {
+      if (!props.confirmOnEnter) {
+        return;
+      }
       const eventSrc = e.target as HTMLElement;
       if (eventSrc.tagName.toLowerCase() === 'input') return; // 若是input触发 则不执行
       const { code } = e;
@@ -251,6 +249,7 @@ export default defineComponent({
       }
     };
     const keyboardEvent = (e: KeyboardEvent) => {
+      keyboardEnterEvent(e);
       if (e.code === 'Escape' && stack.top === instance.uid) {
         props.onEscKeydown?.({ e });
         // 根据closeOnEscKeydown判断按下ESC时是否触发close事件
@@ -419,7 +418,6 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
-      addKeyboardEvent(false);
       destroySelf();
     });
 
@@ -437,6 +435,8 @@ export default defineComponent({
       hasEventOn,
       renderDialog,
       teleportElement,
+      keyboardEvent,
+      divRef,
     };
   },
   render() {
@@ -465,7 +465,15 @@ export default defineComponent({
           onAfterLeave={this.afterLeave}
         >
           {(!this.destroyOnClose || this.visible) && (
-            <div v-show={this.visible} class={ctxClass} style={ctxStyle} {...this.$attrs}>
+            <div
+              ref="divRef"
+              tabindex={0}
+              onKeydown={this.keyboardEvent}
+              v-show={this.visible}
+              class={ctxClass}
+              style={ctxStyle}
+              {...this.$attrs}
+            >
               {view}
             </div>
           )}
diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx
index 959dc58f8d..2640599451 100644
--- a/src/drawer/drawer.tsx
+++ b/src/drawer/drawer.tsx
@@ -99,12 +99,12 @@ export default defineComponent({
       };
     });
 
-    const handleEscKeydown = (e: KeyboardEvent) => {
-      if (props.closeOnEscKeydown ?? (globalConfig.value.closeOnEscKeydown && e.key === 'Escape')) {
-        props.onEscKeydown?.({ e });
-        closeDrawer({ trigger: 'esc', e });
-      }
-    };
+    // const handleEscKeydown = (e: KeyboardEvent) => {
+    //   if (props.closeOnEscKeydown ?? (globalConfig.value.closeOnEscKeydown && e.key === 'Escape')) {
+    //     props.onEscKeydown?.({ e });
+    //     closeDrawer({ trigger: 'esc', e });
+    //   }
+    // };
 
     const clearStyleFunc = () => {
       clearTimeout(styleTimer.value);
@@ -174,6 +174,9 @@ export default defineComponent({
           if (!props.showInAttachedElement && props.preventScrollThrough) {
             styleEl.value && document.head.appendChild(styleEl.value);
           }
+          nextTick(() => {
+            drawerEle.value?.focus?.();
+          });
         } else {
           clearStyleFunc();
         }
@@ -246,12 +249,12 @@ export default defineComponent({
         document.head.appendChild(styleEl.value);
       }
 
-      window.addEventListener('keydown', handleEscKeydown);
+      // window.addEventListener('keydown', handleEscKeydown);
     });
 
     onBeforeUnmount(() => {
       clearStyleFunc();
-      window.removeEventListener('keydown', handleEscKeydown);
+      // window.removeEventListener('keydown', handleEscKeydown);
     });
 
     return () => {