Bug: combobox inside of modal not overflowing correctly

[benelan]

Actual Behavior

The calcite-combobox list container opens inside of the calcite-modal content div rather than overflowing.

Expected Behavior

The calcite-combobox list container overflows correctly like it does with calcite-select.

Reproduction Steps and Sample

Sample: calcite-select: https://codepen.io/benesri/pen/NWgLgJJ calcite-combobox: https://codepen.io/benesri/pen/eYRLWej

Relevant Info

https://community.esri.com/t5/calcite-design-system-questions/combobox-vs-select-in-a-modal/m-p/1084169#M29

Version: @esri/calcite-components@1.0.0-beta.65

• [x] CDN
• [ ] NPM package

[benelan]

Changing the modal class to overflow-visible has worked for me in the past with bootstrap, but since it currently works for calcite-select there may be a different approach?

[jcfranco]

Please add your planning poker estimate with ZenHub @driskull

[driskull]

@jcfranco this is an issue with modal, not combobox.

The native select is apples to oranges as it renders using browser UI.

If the .modal class on the modal removes overflow:hidden and the .content class in the modal is set to overflow:visible then this works fine.

We probably need an option to set that up?

[Elijbet]

@jcfranco this is an issue with modal, not combobox.

The native select is apples to oranges as it renders using browser UI.

If the .modal class on the modal removes overflow:hidden and the .content class in the modal is set to overflow:visible then this works fine.

We probably need an option to set that up?

I tried to explore that option, but I don't see how removing overflow:hidden would work with modals that have both large content and a combobox. Here is a sample: https://codepen.io/elijbet/pen/JjroqZq

[driskull]

I think this is a bigger issue that applies to any component using popper.js. If placed inside a model, it's contained within that modal by default.

If we want it outside of that modal, the popper node would need to be appended to the document.body instead. This would require some discussion and refactoring.

I think we should setup a discussion and push the issue to a different milestone.

[jcfranco]

This is blocked by https://github.com/Esri/calcite-components/issues/3815.

[jcfranco]

I think I've found a way to move forward with this w/o having to wait for improvements to floating-ui. Will have a test PR up soon.

[jcfranco]

Installed 2 PRs that should help fix the main issue as long as the combobox is positioned below (see https://codepen.io/jcfranco/pen/zYWPQey). Otherwise, there is an issue with z-index layering. I've submitted #5058 to fix this and other z-index issues.

[jcfranco]

5058 has officially landed.

[github-actions[bot]]

Installed and assigned for verification.

[benelan]

verified on next