fix(Dialog): skip keyboard events of child elements (#10285)

* fix(Dialog): skip keyboard events of child elements

* test: fix snapshot

packages/vant/src/dialog/Dialog.tsx

@@ -1,13 +1,15 @@
 import {
+  ref,
   reactive,
+  withKeys,
   defineComponent,
   type PropType,
   type ExtractPropTypes,
-  withKeys,
 } from 'vue';
 
 // Utils
 import {
+  noop,
   pick,
   extend,
   addUnit,
@@ -20,6 +22,7 @@ import {
   makeStringProp,
   callInterceptor,
   createNamespace,
+  type ComponentInstance,
 } from '../utils';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
@@ -72,9 +75,10 @@ export default defineComponent({
 
   props: dialogProps,
 
-  emits: ['confirm', 'cancel', 'update:show', 'keydown'],
+  emits: ['confirm', 'cancel', 'keydown', 'update:show'],
 
   setup(props, { emit, slots }) {
+    const root = ref<ComponentInstance>();
     const loading = reactive({
       confirm: false,
       cancel: false,
@@ -116,13 +120,17 @@ export default defineComponent({
     const onConfirm = getActionHandler('confirm');
     const onKeydown = withKeys(
       (event: KeyboardEvent) => {
+        // skip keyboard events of child elements
+        if (event.target !== root.value?.popupRef?.value) {
+          return;
+        }
+
         const onEventType: Record<string, () => void> = {
-          Enter: props.showConfirmButton ? onConfirm : () => {},
+          Enter: props.showConfirmButton ? onConfirm : noop,
-          Escape: props.showCancelButton ? onCancel : () => {},
+          Escape: props.showCancelButton ? onCancel : noop,
         };
 
         onEventType[event.key]();
-
         emit('keydown', event);
       },
       ['enter', 'esc']
@@ -243,12 +251,13 @@ export default defineComponent({
       const { width, title, theme, message, className } = props;
       return (
         <Popup
-          tabindex={0}
+          ref={root}
-          onKeydown={onKeydown}
           role="dialog"
           class={[bem([theme]), className]}
           style={{ width: addUnit(width) }}
+          tabindex={0}
           aria-labelledby={title || message}
+          onKeydown={onKeydown}
           onUpdate:show={updateShow}
           {...pick(props, popupInheritKeys)}
         >

packages/vant/src/dialog/test/__snapshots__/demo.spec.ts.snap

@@ -96,8 +96,8 @@ 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"
+         tabindex="0"
          aria-labelledby="Title"
          style="display: none;"
     >

packages/vant/src/dialog/test/__snapshots__/index.spec.js.snap

@@ -31,8 +31,8 @@ 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"
+     tabindex="0"
      aria-labelledby="message"
 >
   <div class="van-dialog__content van-dialog__content--isolated">

packages/vant/src/popup/Popup.tsx

@@ -181,7 +181,6 @@ export default defineComponent({
 
       return (
         <div
-          onKeydown={onKeydown}
           v-show={props.show}
           ref={popupRef}
           style={style.value}
@@ -192,6 +191,7 @@ export default defineComponent({
             }),
             { 'van-safe-area-bottom': safeAreaInsetBottom },
           ]}
+          onKeydown={onKeydown}
           {...attrs}
         >
           {slots.default?.()}
@@ -222,10 +222,11 @@ export default defineComponent({
         if (show && !opened) {
           open();
 
-          attrs.tabindex === 0 &&
+          if (attrs.tabindex === 0) {
             nextTick(() => {
               popupRef.value?.focus();
             });
+          }
         }
         if (!show && opened) {
           opened = false;

packages/vant/src/popup/types.ts

@@ -1,4 +1,4 @@
-import type { ComponentPublicInstance } from 'vue';
+import type { Ref, ComponentPublicInstance } from 'vue';
 import type { PopupProps } from './Popup';
 
 export type PopupPosition = 'top' | 'left' | 'bottom' | 'right' | 'center' | '';
@@ -9,4 +9,8 @@ export type PopupCloseIconPosition =
   | 'bottom-left'
   | 'bottom-right';
 
-export type PopupInstance = ComponentPublicInstance<PopupProps>;
+export type PopupExpose = {
+  popupRef: Ref<HTMLElement>;
+};
+
+export type PopupInstance = ComponentPublicInstance<PopupProps, PopupExpose>;