-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
4.2.6
Environment
System: OS: macOS CPU: (8) x64 Intel(R) Core(TM) i7 Memory: 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm Browsers: Chrome: 128.0.6613.84 npmPackages: ant-design-vue: ^4.2.6 => 4.2.6 vue: ^3.5.12 => 3.5.12
Reproduction link
https://vuecomponent.github.io/issue-helper/
Steps to reproduce
- Create a Vue app with Ant Design Vue Select component
- Mount the app inside a closed Shadow DOM
- Click on the Select dropdown
- Observe the dropdown position
What is expected?
The Select dropdown should position correctly below or above the trigger element, appearing within the viewport.
What is actually happening?
The dropdown renders with negative coordinates (e.g., left: -387px; top: -820px) and appears offscreen, making it unusable.
This issue occurs specifically when using Ant Design Vue components inside a closed Shadow DOM, which is common in micro-frontend architectures. The positioning calculation logic doesn't account for the Shadow DOM boundary, causing coordinate system mismatch.
Code example:
<!-- HTML Setup --> <!DOCTYPE html> <html> <body> <div id="shadow-host"></div> <script type="module"> const shadowHost = document.getElementById('shadow-host') const shadowRoot = shadowHost.attachShadow({ mode: 'closed' }) shadowRoot.innerHTML = '<div id="app"></div>' // Mount Vue app here </script> </body> </html>
<!-- Vue Component --> <template> <ConfigProvider :get-popup-container="getPopupContainer"> <Select v-model:value="selectedValue" placeholder="Select an option" :options="options" /> </ConfigProvider> </template> <script setup> import { Select, ConfigProvider } from 'ant-design-vue' import { ref } from 'vue' const selectedValue = ref(undefined) const options = [ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, { label: 'Option 3', value: '3' }, ] const getPopupContainer = (triggerNode) => { // This doesn't work properly in closed Shadow DOM return document.body } </script>
Error in console (if any):
No console errors, but dropdown positioning is incorrect with negative coordinates.