autocomplete dropdown has the wrong width when expanded and teleported

[theonelucas]

While using the o-autocomplete inside a modal, I'm using the teleport prop to have it's o-dropdown teleported to the body, so that the dropdown doesn't mess up with the modal height, but instead, displays itself above the modal.

That all works fine, the issue is, the o-autocomplete have it's expanded prop set to true, and that causes the dropdown from the autocomplete to expand it's width up to the screen border, which is not what we expect, we expect the dropdown when expanded: true to expand at most to the search input width, and only expand any further than that when any of the items within the dropdown are larger in width than the search input.

Oruga version: 0.8.8
Vuejs version: 3.4.21
OS/Browser: Chrome

[mlmoravek]

Hey, what theme are you using?

First of all, I can see the problem here.

The short answer is that when teleporting, the dropdown menu does not know the width of the trigger element (the input of the Autocomplete component), so it cannot align the width with the trigger using css.

I think the Ouga theme did the right thing by preventing the expanded css styling of the menu when teleporting. However, the Bulma and Bootstrap themes do not. I think we can add the same behaviour to these themes.

For comparison, take a look at the "Position" example on the Dropdown component docs page and enable teleport. If you change the themes in the header menu, you will see what I mean.

[theonelucas]

Hey, what theme are you using?

First of all, I can see the problem here.

The short answer is that when teleporting, the dropdown menu does not know the width of the trigger element (the input of the Autocomplete component), so it cannot align the width with the trigger using css.

I think the Ouga theme did the right thing by preventing the expanded css styling of the menu when teleporting. However, the Bulma and Bootstrap themes do not. I think we can add the same behaviour to these themes.

For comparison, take a look at the "Position" example on the Dropdown component docs page and enable teleport. If you change the themes in the header menu, you will see what I mean.

I'm using the Bulma theme.

Is teleporting the recommended way of dealing with dropdowns inside modals? If there's a better way to do this I'm all ears, as the dropdown would still be able to calculate it's width from it's trigger.

[mlmoravek]

I think the problem with dropdowns inside modals should be fixed with Oruga 0.9.x and theme-bulma 0.5.x, so you don't need to add teleport anymore (see oruga-ui/theme-bulma#143).

If you encounter any problems with the latest version of Oruga and any theme, let me know :)

[joeyberkovitz]

@mlmoravek - I encountered this issue with Oruga 0.9.2 with the bootstrap theme - 0.7.2

I'm using teleport because I encountered a scenario where the dropdown causes an overflow/scroll rather than growing the container it's in.

It looks like the position of the dropdown is manually calculated in the PositionWrapper component. Based on testing, something along the lines of a max-width: calc(100vw - position-left/2) seems pretty reasonable, maybe with a bit of padding to avoid being larger than the parent dropdown

[mlmoravek]

When you haven't set teleport in the autocomplete, everything looks fine. Just make sure you don't use teleport on a component that has already been teleported.