Is there a way to nest a combobox rendered in a portal inside the drawer as modal?

[crissadriana]

Hey, thanks for this great library! I need to use a combobox (from headlessui) inside the drawer, but it won't let me select any of the combobox options because it is rendered in a portal on the body. The drawer is used and needs to be used as a modal hence it prevents clicking outside of it and because the combobox is rendered on the body it becomes inaccessible. If I pass modal = false I can access the combobox, but I lose the modal features which are needed. Any suggestions would be appreciated!

[emilkowalski]

What if you just set portal={false} in headless ui's combobox?

[crissadriana]

@emilkowalski thanks for your reply! The portal is actually forced to true on headlessui if the anchor prop is passed in order to automatically position the dropdown depending on the available space in the viewport (which is my use case too). If I'd drop the anchor and set the portal=false on headlessui combobox, it would work, but I'd lose the auto positioning of the combobox component which is a requirement in this case.

[crissadriana]

@emilkowalski I was wondering if it would be possible to pass modal=false to the drawer primitive but somehow enforce the Overlay to show up (at the moment it doesn't)?

[younessbennaj]

@crissadriana Hello, I face the same issue, did you find a solution ? thank you :)

[crissadriana]

@younessbennaj I ended up migrating the combobox to use the component from shadcnui (which uses radixui) - this way I'm able to render the combobox in a custom portal inside the drawer.

[younessbennaj]

@crissadriana thank you for your quick reply and recommendation, I will try that !