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

CleanShot.2024-09-20.at.12.53.08.mp4

Additional context

I've nailed down the line of code within conform that is causing the issue:

conform/packages/conform-dom/form.ts

Line 1012 in 2f2111c

form?.removeChild(submitter);

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.