Are nested dialogs possible? (modal and slide-over with React)

[lww]

Hi, I'm using a slide-over from TailwindUI and would like to open a modal from within this slide-over.
Is this possible to implement?
Unfortunately I get this: Error: There are no focusable elements inside the <FocusTrap />

It seems like there is a conflict between the slide-over and modal focus.

I'm not sure I can share code from TailwindUI, but I'm just using the basic modal and slide-over.

Any help would be a appreciated, thanks!

[RobinMalfait]

As long as there are focusable elements in the Dialog then it should work. Here is an example: https://headlessui-react-git-main-tailwindlabs.vercel.app/dialog/dialog

[lww]

Thanks for the response!

There are definitely focusable elements inside both of them. I'm just copy and pasting the default modal and default slide-over... When I open them separately it works. But opening a modal inside slide-over crashes.

Is there code available for the example url?

[joshma]

+1 to checking out the code! (currently trying to troubleshoot why a nested menu inside a modal results in ESC closing both...)

[octavioamu]

was looking for the same the code is here https://github.com/tailwindlabs/headlessui/blob/main/packages/playground-react/pages/dialog/dialog.tsx

[andrewskm]

Actually this helped me out immediately after I asked the question.
Basically I just needed to have my modals inside of the TransitionRoot and Dialog tags of the slider and it works perfectly with no gripes in the console.