onBlur validation causes focus to go to modal root when form is in a modal

[robertcoopercode]

Describe the bug and the expected behavior

When I blur out of an input on my form, the focus goes to the modal root and not the next focusable element on the page. Only happens for forms in a modal. Using radix modal with remix.

Note, I just found this discussion that talks about the same issue.

Conform version

v1.2.2

Steps to Reproduce the Bug or Issue

https://codesandbox.io/p/github/robertcoopercode/conform-dialog-bug/main

What browsers are you seeing the problem on?

Chrome

Screenshots or Videos

https://github.com/user-attachments/assets/557c3dcd-f7c4-43a9-bb91-982c35d52c83

Additional context

I've nailed down the line of code within conform that is causing the issue: https://github.com/edmundhung/conform/blob/2f2111c376605a4d68a613bd779802622d1ea60b/packages/conform-dom/form.ts#L1012

If I comment that out, then the focus works as expected. So there must be something going on when removing the hidden submit button from the DOM (when within a modal) that causes the focus to go to the dialog itself.

[theskillwithin]

@robertcoopercode did you ever figure this out?

[theskillwithin]

+1

[theskillwithin]

I was hoping https://github.com/edmundhung/conform/releases/tag/v1.4.0 would fix this. but I just tried and still doesn't work 😢

[jannisbecker]

I have the same issue currently and it makes conform unusable inside shadcn/radix dialogs. Is there a workaround I can apply until this is fixed?