UDropdown and UPopover dropdown menu, dropdown will be obscured

[dxhuii]

Version

"@nuxthq/ui": "^2.5.0",
"@types/node": "^18",
"nuxt": "^3.6.1"

Reproduction Link

https://stackblitz.com/edit/nuxtlabs-ui-v7mav7?file=package.json

Steps to reproduce

What is Expected?

What is actually happening?

It will be obscured when pulling down.

Not when displayed upwards

UPopover

Same, not when displayed up

[benjamincanac]

Would you mind re-writing your issue in English?

You can use the fixed strategy from popper if you have z-index issues: <UDropdown :popper="{ strategy: 'fixed' }" />

[dxhuii]

Would you mind re-writing your issue in English?

You can use the fixed strategy from popper if you have z-index issues: <UDropdown :popper="{ strategy: 'fixed' }" />

Updated to English, I thought you guys were supporting internationalization? What languages are supported? In the future, all questions will be in English.

[dxhuii]

Would you mind re-writing your issue in English?

You can use the fixed strategy from popper if you have z-index issues: <UDropdown :popper="{ strategy: 'fixed' }" />

It's not a z-index problem, it's the wrong position of the insert, it should be inserted into the body, now it's inserted in the click position, there will be this problem. I tried with the method you provided, but it doesn't work, it's still blocked.

[benjamincanac]

Removing the translate and absolute positioning seems to fix the issue though.

[dxhuii]

Removing the translate and absolute positioning seems to fix the issue though.

There's no way to remove translate, it's a virtual-scroller generated for positioning. This library (vue-virtual-scroller) is used, as is elk.zone. But he seems to have configured it to be turned on.

[benjamincanac]

The only way I see to solve this is to move away from Popper to @headlessui-float/vue. I've tried something here https://github.com/nuxtlabs/ui/pull/312 but ran into an hydration bug. Here is the original issue: https://github.com/nuxtlabs/ui/issues/181

This would allow us to move Popover and Tooltip to a Portal.

[ahoiroman]

Same problem here. Is there still wip?

Edit: Sorry, I did not see the related issues. Seems WIP actually.

[huongphamx]

Hi, I'm facing the same problem with v.2.15.2. I've tried to use Floating UI Vue directly as in other discussion Radix-Vue used it internally, but it didn't solve the problem. Look like it related to other components, too. In the video, the dropdown was obscured by the disabled button. When the button enabled, it was not obscured. dropdown.webm