From c1be4112e46dd4468300ba2584b7ab76b8823c56 Mon Sep 17 00:00:00 2001
From: zoy-l <409626581@qq.com>
Date: Fri, 11 Feb 2022 14:52:49 +0800
Subject: [PATCH] feat(Dialog): support enter/esc keyboard event (#10261)

* feat(dialog): the enter/esc keyboard event is supported

* fix(dialog): the corresponding method is not executed when there is no button

* chore(dialog): simplify implementation

* fix: the wrong judgment
---
 packages/vant/src/dialog/Dialog.tsx            | 18 +++++++++++++++++-
 .../test/__snapshots__/demo.spec.ts.snap       |  1 +
 .../test/__snapshots__/index.spec.js.snap      |  1 +
 packages/vant/src/popup/Popup.tsx              | 10 ++++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/vant/src/dialog/Dialog.tsx b/packages/vant/src/dialog/Dialog.tsx
index 92ca35343..a767ea648 100644
--- a/packages/vant/src/dialog/Dialog.tsx
+++ b/packages/vant/src/dialog/Dialog.tsx
@@ -3,6 +3,7 @@ import {
   defineComponent,
   type PropType,
   type ExtractPropTypes,
+  withKeys,
 } from 'vue';
 
 // Utils
@@ -71,7 +72,7 @@ export default defineComponent({
 
   props: dialogProps,
 
-  emits: ['confirm', 'cancel', 'update:show'],
+  emits: ['confirm', 'cancel', 'update:show', 'keydown'],
 
   setup(props, { emit, slots }) {
     const loading = reactive({
@@ -113,6 +114,19 @@ export default defineComponent({
 
     const onCancel = getActionHandler('cancel');
     const onConfirm = getActionHandler('confirm');
+    const onKeydown = withKeys(
+      (event: KeyboardEvent) => {
+        const onEventType: Record<string, () => void> = {
+          Enter: props.showConfirmButton ? onConfirm : () => {},
+          Escape: props.showCancelButton ? onCancel : () => {},
+        };
+
+        onEventType[event.key]();
+
+        emit('keydown', event);
+      },
+      ['enter', 'esc']
+    );
 
     const renderTitle = () => {
       const title = slots.title ? slots.title() : props.title;
@@ -229,6 +243,8 @@ export default defineComponent({
       const { width, title, theme, message, className } = props;
       return (
         <Popup
+          tabindex={0}
+          onKeydown={onKeydown}
           role="dialog"
           class={[bem([theme]), className]}
           style={{ width: addUnit(width) }}
diff --git a/packages/vant/src/dialog/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/dialog/test/__snapshots__/demo.spec.ts.snap
index 15787c499..f3802493e 100644
--- a/packages/vant/src/dialog/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/dialog/test/__snapshots__/demo.spec.ts.snap
@@ -96,6 +96,7 @@ exports[`should render demo and match snapshot 1`] = `
   </transition-stub>
   <transition-stub>
     <div class="van-popup van-popup--center van-dialog"
+         tabindex="0"
          role="dialog"
          aria-labelledby="Title"
          style="display: none;"
diff --git a/packages/vant/src/dialog/test/__snapshots__/index.spec.js.snap b/packages/vant/src/dialog/test/__snapshots__/index.spec.js.snap
index 8a71a99a9..5846e581e 100644
--- a/packages/vant/src/dialog/test/__snapshots__/index.spec.js.snap
+++ b/packages/vant/src/dialog/test/__snapshots__/index.spec.js.snap
@@ -31,6 +31,7 @@ exports[`should render default slot correctly 1`] = `
 
 exports[`should render footer slot correctly 1`] = `
 <div class="van-popup van-popup--center van-dialog"
+     tabindex="0"
      role="dialog"
      aria-labelledby="message"
 >
diff --git a/packages/vant/src/popup/Popup.tsx b/packages/vant/src/popup/Popup.tsx
index 78efca23f..06bddd6c3 100644
--- a/packages/vant/src/popup/Popup.tsx
+++ b/packages/vant/src/popup/Popup.tsx
@@ -3,6 +3,7 @@ import {
   watch,
   provide,
   Teleport,
+  nextTick,
   computed,
   onMounted,
   Transition,
@@ -68,6 +69,7 @@ export default defineComponent({
     'close',
     'opened',
     'closed',
+    'keydown',
     'update:show',
     'click-overlay',
     'click-close-icon',
@@ -172,11 +174,14 @@ export default defineComponent({
 
     const onOpened = () => emit('opened');
     const onClosed = () => emit('closed');
+    const onKeydown = (event: KeyboardEvent) => emit('keydown', event);
 
     const renderPopup = lazyRender(() => {
       const { round, position, safeAreaInsetBottom } = props;
+
       return (
         <div
+          onKeydown={onKeydown}
           v-show={props.show}
           ref={popupRef}
           style={style.value}
@@ -216,6 +221,11 @@ export default defineComponent({
       (show) => {
         if (show && !opened) {
           open();
+
+          attrs.tabindex === 0 &&
+            nextTick(() => {
+              popupRef.value?.focus();
+            });
         }
         if (!show && opened) {
           opened = false;