Append dropdown to body

[mrleblanc101]

Version

• Vue version: 2 and 3

Description

Currently, the dropdown is a child of the component, it should be appended to the body using a <Teleport> (Vue 3) / <Portal> (Vue 2) to prevent making an overflow-y: auto; scrollable (ex: Inside a modal).

Demo

Desired behavior (the dropdown should overlay everything):

[farisnceit]

i'm also facing this issue need a solution

[vishnusree66]

any solution?

[hamonCordova]

Same problem here

[hellojessicagraham]

please? 🥺

[phanuwit007]

please !!

[MohamedHana]

Version

• Vue version: 2 and 3

Description

Currently, the dropdown is a child of the component, it should be appended to the body using a (Vue 3) / (Vue 2) to prevent making an overflow-y: auto; scrollable (ex: Inside a modal).

Demo

Desired behavior (the dropdown should overlay everything):

To have the desired behavior the modal body should not be scrollable.

[MohamedHana]

To have the desired behavior the modal body should not be scrollable.

[mrleblanc101]

To have the desired behavior the modal body should not be scrollable.

@MohamedHana You're missing the point, I want the modal body to be scrollable if it has long content, I don't want the dropdown to trigger the scroll. The dropdown should be appended to the body of the page like every dropdown library does (like Popper.js)

[adamberecz]

Thank you for the patience guys. It's now implemented in 2.6.3 and can be enabled with appendToBody: true. It's still experiemental and only works in Vue.js 3 so please open an issue if you encounter any problems.