Dialog won't unmount when dismissed while mobile keyboard is open

[ericwang401]

Hey everyone 👋,

I'm trying to make a dialog using the Headless UI Dialog component and the Transition component so that the dialog looks like this on desktop:

And like this on mobile:

However, I found out that the dialog component doesn't unmount in this specific scenario that is VERY easy to trigger

1. User is on mobile
2. User opens the dialog
3. User focuses the textbox and the mobile keyboard is visible
4. User then clicks the backdrop behind the dialog, dismissing the dialog. The user is performing this while the mobile keyboard is still active
5. Dialog dismisses and transitions out of view. Though the component doesn't unmount and blocks any interaction on any components underneath (buttons, text inputs, etc).

Video demonstration:
https://youtube.com/shorts/Qhr1_azemaM?feature=share

Codesandbox link

The actual result I want is when the user dismisses while the virtual keyboard is open, the dialog should transition out of view and unmount so that underlying elements can be interacted with.

[ericwang401]

Turns out this is a bug. It was answered here https://stackoverflow.com/questions/74497444/dialog-wont-unmount-when-dismissed-while-mobile-keyboard-is-open/74497766#74497766