ant-design-vue Select Dropdown Positioning Issues in Closed Shadow DOM

[ ] 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.

Aug 30 '25 17:08 tuandang-diag

将查看问题

Aug 31 '25 14:08 webvs2

Update: I change the mode of the shadow dome to open then most of the issue fixed except the Sub Menu. When I use submenu in dropdown, the submenu will be attached to the body. I saw it hit the function get-popup-container which I provided in ConfigProvider but look like the Sub Menu does not respect the container

Sep 26 '25 10:09 tuandang-diag

@webvs2 I found the issue. Because the Menu component doesn't use useConfigInject so it's not respect the configuration from ConfigProvider

Oct 13 '25 10:10 tuandang-diag

Now the workaround is add :get-popup-container="getPopupContainer" to Menu component anytime we use it

Oct 13 '25 11:10 tuandang-diag

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

Dec 13 '25 02:12 github-actions[bot]