Add container option to our Dropdowns

[Johann-S]

Add container option to our Dropdowns

For those who wants to try : https://codepen.io/Johann-S/pen/EwoPYo

Fixes : #24251

[danijelGombac]

I was try this changes and it works fine, only the position of the dropdown is wrong on the first click. When you click again the position is ok.

First click: translate3d(1625px, 406px, 0px)
Second click: translate3d(1642px, 406px, 0px)

[Johann-S]

Seems related to Popper.js 😟
/CC @FezVrasta

EDIT:
I'm able to reproduce what's described by @danijelGombac on this CodePen : https://codepen.io/Johann-S/pen/WZdrKj

[tmorehouse]

One caveat... if someone specifies a container when the dropdown is inside a collapsible navbar. Would need to have a guard in there to prevent the dropdown from being re-parented in that case.

[Johann-S]

Good catch @tmorehouse ! 👍
I'll enable that feature only for dropdowns not in a navbar

[danijelGombac]

If you use this option with dropdown inside modal, the dorpdown position is wrong when scrolling modal.

[Johann-S]

You can call update of our Dropdown plugin it will update the position of your Dropdown 👍

[danijelGombac]

This happen when dropdown is inside overflow. Try open modal and dropdown.

https://codepen.io/danijelGombac/pen/OxZxZM

[Johann-S]

Not sure it's related to Bootstrap here @danijelGombac because it's Popper.js which handle the position

[danijelGombac]

Yes the problem is in Popper.js. It can't handle two overflow container if the first container is not position static.

https://codepen.io/danijelGombac/pen/OxZxZM

[Johann-S]

maybe @FezVrasta will have time to take look at this issue 😄

[danijelGombac]

I hope. There could be also problems with tooltips and popover inside modal and table-responsive.

[Johann-S]

I made an issue to track that : floating-ui/floating-ui#459

[Johann-S]

I found a solution to fix that @danijelGombac 👍

[danijelGombac]

@Johann-S

Why not apply this config option only when config.container was used?

[Johann-S]

yep you're right seems better with that way !

EDIT :
done @danijelGombac 👍

[tmorehouse]

Just thinking ARIA and tab order.

Will re-parenting to the body change the tab order of the menu items, since the menu items are no longer siblings of the menu trigger button?

[patrickhlauke]

indeed. unless focus is moved into the dropdown when it's opened and then kept there, this would be quite a broken experience for kbd users. (in the example in codepen, simply add some other focusable elements to the page to see the problem). so (just going by the example posted in the starter, not tried the actual code in this PR) i'd say no to this...

[tmorehouse]

The only way would be to test the focus order (simulating tab presses) before opening/reparenting and trapping tab/shift-tab to move focus to the correct items, but that would be really tricky and probably really buggy.

[tmorehouse]

WAI-ARIA recommends focusing the first item in dropdown menus when first opened, so that screen reader users are "inside" the dropdown, and that tabbing while inside the menu would close the menu and tab to the next document focusable item. Moving between menu items while opened is only handled by cursor up/down/left/right (although this doesnt work well for form controls (especially textarea)

This is what we have done in the Bootstrap-Vue implementation of Bootstrap V4 dropdowns (at the moment, as we don't support form in dropdowns at the moment)

[patrickhlauke]

WAI-ARIA recommends...

but these are not menus in the WAI-ARIA sense, merely generic expand/collapse dropdowns (as they can contain more than simply menu items). see https://getbootstrap.com/docs/4.0/components/dropdowns/#accessibility

[tmorehouse]

@patrickhlauke yeah, I've seen that section before, and it is why we haven't implemented forms inside dropdowns (yet), as the native Bootstrap V4 implementation is not as intuitive to some screen reader users.

We are thinking of adding n option to change from role menu to role popup when the dropdown contains form elements (other than standard acceptable menu items), and change from keyboard navigation (up/down) to pure tab only navigation. Although this switch might be confusing to keyboard users (but not to screen-reader users).

[tmorehouse]

But back to the re-parenting discussion, I think moving the menu to somewhere else in the body will be confusing to keyboard users (due to the possibility of getting "lost" in the document when tabbing around).

[patrickhlauke]

We are thinking of adding n option to change from role menu to role popup

assuming you mean dialog, that was actually something i considered not long ago...making the trigger elements aria-haspopup="dialog" and treating the dropdown itself as a form of non-modal dialog (including managing the focus to remain inside it, possibly)

[tmorehouse]

Yep, meant to say 'dialog' (had aria-haspopup on the mind)

[Johann-S]

I updated my Codepen : https://codepen.io/Johann-S/pen/EwoPYo
with the keyboard navigation fixed 👍

[danijelGombac]

@Johann-S The tab key not working how it should. When tab is pressed the menu close.

[patrickhlauke]

keyboard navigation fixed how? see https://codepen.io/patrickhlauke/pen/ZaQzMR ... tab to open the dropdown, then tab again - focus moved to the "foo" links. and yes as noted, once user eventually gets to the dropdown itself, tab closes the menu.

i think the reparenting of the dropdown is not a good idea, as it just adds too many complications (in our current implementation)

[Johann-S]

Yep and changing the behavior on how our Dropdowns work on TAB adds a lot of complexicity 😟
So we are stuck for this issue #24251

[FezVrasta]

I added some information useful to provide a workaround for #24251 and that could possibly replace the most basic usages of this very own PR

[tmorehouse]

Would some of the Popper.js overflow modifiers fix this? https://popper.js.org/popper-documentation.html#modifiers..preventOverflow

[tmorehouse]

I think PR #24976 provides a better solution without the need for re-parenting the .dropdown-menu, taking @FezVrasta 's idea (position: static) suggestion, and adding in Popper's boundariesElement modifier.

[Johann-S]

closed because #24976 is better 👍