From 24e91764330a604903f3478b48a57e1b5656c813 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Fri, 29 Sep 2023 21:09:08 +0800
Subject: [PATCH] fix(Popup): fix failed to inherit scopedId (#12327)

---
 packages/vant/src/composables/use-scope-id.ts | 8 ++++++++
 packages/vant/src/popup/Popup.tsx             | 3 +++
 2 files changed, 11 insertions(+)
 create mode 100644 packages/vant/src/composables/use-scope-id.ts

diff --git a/packages/vant/src/composables/use-scope-id.ts b/packages/vant/src/composables/use-scope-id.ts
new file mode 100644
index 000000000..ca3bc164e
--- /dev/null
+++ b/packages/vant/src/composables/use-scope-id.ts
@@ -0,0 +1,8 @@
+import { getCurrentInstance } from 'vue';
+
+// Fix failed to get scopeId when using teleport & fragment
+// https://github.com/vuejs/core/issues/2669
+export const useScopeId = () => {
+  const { scopeId } = getCurrentInstance()?.vnode || {};
+  return scopeId ? { [scopeId]: '' } : null;
+};
diff --git a/packages/vant/src/popup/Popup.tsx b/packages/vant/src/popup/Popup.tsx
index 1aad88547..f2629ac2b 100644
--- a/packages/vant/src/popup/Popup.tsx
+++ b/packages/vant/src/popup/Popup.tsx
@@ -32,6 +32,7 @@ import { useLockScroll } from '../composables/use-lock-scroll';
 import { useLazyRender } from '../composables/use-lazy-render';
 import { POPUP_TOGGLE_KEY } from '../composables/on-popup-reopen';
 import { useGlobalZIndex } from '../composables/use-global-z-index';
+import { useScopeId } from '../composables/use-scope-id';
 
 // Components
 import { Icon } from '../icon';
@@ -143,6 +144,7 @@ export default defineComponent({
             customStyle={props.overlayStyle}
             role={props.closeOnClickOverlay ? 'button' : undefined}
             tabindex={props.closeOnClickOverlay ? 0 : undefined}
+            {...useScopeId()}
             onClick={onClickOverlay}
           />
         );
@@ -205,6 +207,7 @@ export default defineComponent({
           ]}
           onKeydown={onKeydown}
           {...attrs}
+          {...useScopeId()}
         >
           {slots.default?.()}
           {renderCloseIcon()}