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

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

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

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

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>

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

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

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

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

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>

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();
+});

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

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

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>

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

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