Expand controls outside dialog without triggering auto close

[woconnor]

Hello, nice work on putting this together!

I'm trying to put a listbox inside a dialog, but I want it to render beyond the dialog when expanded. I can do this by moving the expanded part of the listbox outside the dialog (using a portal) to overlay it on top. However, this causes the dialog to close when a listbox item is clicked because it is no longer a descendant of the dialog. Is there a way to prevent the dialog from closing in this scenario? (Listbox is just an example here, but the same behaviour is desired with combobox, menu, etc.)

[CaptainCodeman]

Thanks!

I think you might be able to do it simpler than that, if I'm understanding things right. With the components as-is in the demo, it should just be a case of removing the overflow-hidden from the dialog - the drop-down part of the listbox is absolutely positioned and shouldn't push the content out but instead overflow the dialog as shown below:

I can post the code tomorrow.

This assumes there's nothing preventing that, such as maybe needing the dialog to also be scrollable (?)

[woconnor]

Thanks for the quick reply.

Yes, I was trying to let the dialog scroll for smaller breakpoints. On second thought it's simpler to avoid this scenario in the first place. For smaller breakpoints I can just make the dialog fullscreen.

I was also experimenting with having one dialog launch another, which falls to the same auto close problem. I don't strictly need that functionality either (some consider it to be an anti-pattern with better alternatives), but thought you might like to know. Feel free to close this in any case.

[CaptainCodeman]

I think dialogs launching dialogs is especially bad, that's the point I start re-evaluating my life choices, LOL

And yes, dialogs only make sense on certain sized screens (or if they are very small message popups). On mobile its really another view that you can back out of.