fix(Overlay): should inherit attrs when using teleport prop (#13424)

2025-10-15 23:55:08 +00:00 · 2025-04-12 16:07:58 +08:00
parent 60c22101fd
commit 070adbecfc
15 changed files with 73 additions and 154 deletions
--- a/packages/vant/src/action-sheet/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/action-sheet/test/snapshots/demo.spec.ts.snap
@@ -90,8 +90,6 @@ exports[`should render demo and match snapshot 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
 </transition-stub>
 <transition-stub
@@ -106,8 +104,6 @@ exports[`should render demo and match snapshot 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
 </transition-stub>
 <transition-stub
@@ -122,8 +118,6 @@ exports[`should render demo and match snapshot 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
 </transition-stub>
 <transition-stub
@@ -138,8 +132,6 @@ exports[`should render demo and match snapshot 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
 </transition-stub>
 <transition-stub
@@ -154,8 +146,6 @@ exports[`should render demo and match snapshot 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
 </transition-stub>
 <transition-stub
@@ -170,8 +160,6 @@ exports[`should render demo and match snapshot 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
 </transition-stub>
 <transition-stub
--- a/packages/vant/src/action-sheet/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/action-sheet/test/snapshots/index.spec.ts.snap
@@ -32,10 +32,12 @@ exports[`should render default slot correctly 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
-  <div class="van-overlay">
+  <div
+    class="van-overlay"
+    role="button"
+    tabindex="0"
+  >
  </div>
 </transition-stub>
 <transition-stub
--- a/packages/vant/src/calendar/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/calendar/test/snapshots/demo.spec.ts.snap
@@ -25,8 +25,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -782,8 +780,6 @@ exports[`should render demo and match snapshot 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
 </transition-stub>
 <transition-stub
--- a/packages/vant/src/calendar/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/calendar/test/snapshots/index.spec.ts.snap
@@ -268,7 +268,7 @@ exports[`formatter prop 1`] = `
 `;

 exports[`popup wrapper 1`] = `
-"<transition-stub name="van-fade" appear="true" persisted="false" css="true" role="button" tabindex="0">
+"<transition-stub name="van-fade" appear="true" persisted="false" css="true">
  <!---->
 </transition-stub>
 <transition-stub name="van-popup-slide-bottom" appear="false" persisted="false" css="true">
@@ -282,12 +282,12 @@ exports[`popup wrapper 2`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
  <div
    style="z-index: 2001;"
    class="van-overlay"
+    role="button"
+    tabindex="0"
  >
  </div>
 </transition-stub>
--- a/packages/vant/src/coupon-list/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/coupon-list/test/snapshots/demo.spec.ts.snap
@@ -25,8 +25,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -61,8 +59,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
--- a/packages/vant/src/dropdown-menu/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/dropdown-menu/test/snapshots/demo.spec.ts.snap
@@ -40,8 +40,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -61,8 +59,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -114,8 +110,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -135,8 +129,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -188,8 +180,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -209,8 +199,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -301,8 +289,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -322,8 +308,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -343,8 +327,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -364,8 +346,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -385,8 +365,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -438,8 +416,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -459,8 +435,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -510,8 +484,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
@@ -531,8 +503,6 @@ exports[`should render demo and match snapshot 1`] = `
        appear="true"
        persisted="false"
        css="true"
-        role="button"
-        tabindex="0"
      >
      </transition-stub>
      <transition-stub
--- a/packages/vant/src/dropdown-menu/test/snapshots/index.spec.tsx.snap
+++ b/packages/vant/src/dropdown-menu/test/snapshots/index.spec.tsx.snap
@@ -39,12 +39,12 @@ exports[`click option 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
      <div
        style="z-index: 2007; position: absolute; animation-duration: 0.2s; display: none;"
        class="van-overlay"
+        role="button"
+        tabindex="0"
      >
      </div>
    </transition-stub>
@@ -102,8 +102,6 @@ exports[`click option 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -156,12 +154,12 @@ exports[`close-on-click-outside 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
      <div
        style="z-index: 2004; position: absolute; animation-duration: 0.2s; display: none;"
        class="van-overlay"
+        role="button"
+        tabindex="0"
      >
      </div>
    </transition-stub>
@@ -219,8 +217,6 @@ exports[`close-on-click-outside 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -260,8 +256,6 @@ exports[`destroy one item 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -314,8 +308,6 @@ exports[`direction up 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -335,8 +327,6 @@ exports[`direction up 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -389,12 +379,12 @@ exports[`direction up 2`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
      <div
        style="z-index: 2006; position: absolute; animation-duration: 0.2s;"
        class="van-overlay"
+        role="button"
+        tabindex="0"
      >
      </div>
    </transition-stub>
@@ -452,8 +442,6 @@ exports[`direction up 2`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -506,12 +494,12 @@ exports[`disable close-on-click-outside 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
      <div
        style="z-index: 2005; position: absolute; animation-duration: 0.2s;"
        class="van-overlay"
+        role="button"
+        tabindex="0"
      >
      </div>
    </transition-stub>
@@ -569,8 +557,6 @@ exports[`disable close-on-click-outside 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -609,8 +595,6 @@ exports[`disable dropdown item 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -663,12 +647,12 @@ exports[`render option icon 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
      <div
        style="z-index: 2003; position: absolute; animation-duration: 0.2s;"
        class="van-overlay"
+        role="button"
+        tabindex="0"
      >
      </div>
    </transition-stub>
@@ -730,8 +714,6 @@ exports[`render option icon 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -784,12 +766,12 @@ exports[`show dropdown item 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
      <div
        style="z-index: 2001; position: absolute; animation-duration: 0.2s;"
        class="van-overlay"
+        role="button"
+        tabindex="0"
      >
      </div>
    </transition-stub>
@@ -847,8 +829,6 @@ exports[`show dropdown item 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -901,12 +881,12 @@ exports[`show dropdown item 2`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
      <div
        style="z-index: 2001; position: absolute; animation-duration: 0s; display: none;"
        class="van-overlay"
+        role="button"
+        tabindex="0"
      >
      </div>
    </transition-stub>
@@ -964,12 +944,12 @@ exports[`show dropdown item 2`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
      <div
        style="z-index: 2002; position: absolute; animation-duration: 0.2s;"
        class="van-overlay"
+        role="button"
+        tabindex="0"
      >
      </div>
    </transition-stub>
@@ -1060,12 +1040,12 @@ exports[`show dropdown item 3`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
      <div
        style="z-index: 2001; position: absolute; animation-duration: 0s; display: none;"
        class="van-overlay"
+        role="button"
+        tabindex="0"
      >
      </div>
    </transition-stub>
@@ -1123,12 +1103,12 @@ exports[`show dropdown item 3`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
      <div
        style="z-index: 2002; position: absolute; animation-duration: 0.2s; display: none;"
        class="van-overlay"
+        role="button"
+        tabindex="0"
      >
      </div>
    </transition-stub>
@@ -1219,8 +1199,6 @@ exports[`title prop 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -1240,8 +1218,6 @@ exports[`title prop 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
@@ -1281,8 +1257,6 @@ exports[`title slot 1`] = `
      appear="true"
      persisted="false"
      css="true"
-      role="button"
-      tabindex="0"
    >
    </transition-stub>
    <transition-stub
--- a/packages/vant/src/image-preview/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/image-preview/test/snapshots/index.spec.ts.snap
@@ -6,11 +6,12 @@ exports[`render image 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  class="van-image-preview__overlay"
-  role="button"
-  tabindex="0"
 >
-  <div class="van-overlay">
+  <div
+    class="van-overlay van-image-preview__overlay"
+    role="button"
+    tabindex="0"
+  >
  </div>
 </transition-stub>
 <transition-stub
@@ -66,11 +67,12 @@ exports[`should render cover slot correctly 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  class="van-image-preview__overlay"
-  role="button"
-  tabindex="0"
 >
-  <div class="van-overlay">
+  <div
+    class="van-overlay van-image-preview__overlay"
+    role="button"
+    tabindex="0"
+  >
  </div>
 </transition-stub>
 <transition-stub
--- a/packages/vant/src/overlay/Overlay.tsx
+++ b/packages/vant/src/overlay/Overlay.tsx
@@ -43,9 +43,11 @@ export type OverlayProps = ExtractPropTypes<typeof overlayProps>;
 export default defineComponent({
  name,

+  inheritAttrs: false,
+
  props: overlayProps,

-  setup(props, { slots }) {
+  setup(props, { attrs, slots }) {
    const root = ref<HTMLElement>();
    const lazyRender = useLazyRender(() => props.show || !props.lazyRender);

@@ -71,6 +73,7 @@ export default defineComponent({
          ref={root}
          style={style}
          class={[bem(), props.className]}
+          {...attrs}
        >
          {slots.default?.()}
        </div>
--- a/packages/vant/src/overlay/test/index.spec.tsx
+++ b/packages/vant/src/overlay/test/index.spec.tsx
@@ -116,3 +116,19 @@ test('should allow to use the teleport prop', () => {

  expect(root.querySelector('.van-overlay')).toBeTruthy();
 });
+
+test('should inherit attrs when using teleport prop', async () => {
+  const root = document.createElement('div');
+  mount(Overlay, {
+    props: {
+      show: true,
+      teleport: root,
+    },
+    attrs: {
+      class: 'foo',
+    },
+  });
+
+  const overlay = root.querySelector('.van-overlay');
+  expect(overlay?.classList.contains('foo')).toBeTruthy();
+});
--- a/packages/vant/src/picker/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/picker/test/snapshots/demo.spec.ts.snap
@@ -130,8 +130,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
--- a/packages/vant/src/popup/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/popup/test/snapshots/demo.spec.ts.snap
@@ -20,8 +20,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -104,8 +102,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -120,8 +116,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -136,8 +130,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -152,8 +144,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -209,8 +199,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -225,8 +213,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -241,8 +227,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -272,8 +256,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -301,8 +283,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -332,8 +312,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -361,8 +339,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
--- a/packages/vant/src/popup/test/snapshots/index.spec.jsx.snap
+++ b/packages/vant/src/popup/test/snapshots/index.spec.jsx.snap
@@ -6,10 +6,12 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
-  <div class="van-overlay">
+  <div
+    class="van-overlay"
+    role="button"
+    tabindex="0"
+  >
  </div>
 </transition-stub>
 <transition-stub
@@ -47,10 +49,12 @@ exports[`should render overlay-content slot correctly 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
-  <div class="van-overlay">
+  <div
+    class="van-overlay"
+    role="button"
+    tabindex="0"
+  >
    Custom Overlay Content
  </div>
 </transition-stub>
--- a/packages/vant/src/share-sheet/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/share-sheet/test/snapshots/demo.spec.ts.snap
@@ -20,8 +20,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -51,8 +49,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -82,8 +78,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
@@ -113,8 +107,6 @@ exports[`should render demo and match snapshot 1`] = `
    appear="true"
    persisted="false"
    css="true"
-    role="button"
-    tabindex="0"
  >
  </transition-stub>
  <transition-stub
--- a/packages/vant/src/share-sheet/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/share-sheet/test/snapshots/index.spec.ts.snap
@@ -30,10 +30,12 @@ exports[`should render title and description slot correctly 1`] = `
  appear="true"
  persisted="false"
  css="true"
-  role="button"
-  tabindex="0"
 >
-  <div class="van-overlay">
+  <div
+    class="van-overlay"
+    role="button"
+    tabindex="0"
+  >
  </div>
 </transition-stub>
 <transition-stub