Dialog focus issue with react useForm

[riddleit]

Hi, I'm having an issue while using a form (react-hook-form) inside a Dialog. I'm opening the discussion here because I do not get this error if I don't use the Dialog primitives and use something else.

To showcase the issue here is a simple example:

• two simple fields which are both required
• useForm with mode "onBlur"

When navigating via keyboard tab key the focus cycles correctly through the form elements.
After we have both fields with error, when we fill in some characters in one field (to make it valid) and tab (or mouse click to the other field), the focus does not go to the next element but goes to the dialog instead.

Here is an animation with the explained behaviour followed by a code example:
https://github.com/radix-ui/primitives/assets/49200000/1012d684-d0a5-405d-afe0-16aa07dee3b0

TestDialogWithForm:

import * as Dialog from "@radix-ui/react-dialog";
import TestForm from "./TestForm";

export const TestDialogWithForm = () => {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content
          style={{ padding: "0 16px 16px", border: "1px solid lightgray" }}
        >
          <Dialog.Title>Dialog Title</Dialog.Title>
          <TestForm />
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};

TestForm:

import React from "react";
import { Controller, FormProvider, useForm } from "react-hook-form";

const CustomInput = ({ name, value, onChange, onBlur, errors }) => {
  return (
    <div style={{ display: "flex" }}>
      <span>{name}:</span>
      <input
        type="text"
        name={name}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
      />
      <span>{errors[`${name}`] ? `ERROR ${name}` : ""}</span>
    </div>
  );
};

const TestForm = () => {
  const formMethods = useForm({
    mode: "onBlur",
    defaultValues: { name1: "", name2: "" }
  });
  const {
    handleSubmit,
    control,
    formState: { errors, isValidating }
  } = formMethods;

  const onSubmit = (data) => console.log(data);

  return (
    <FormProvider {...formMethods}>
      <form onSubmit={handleSubmit(onSubmit)} autoComplete="off">
        <Controller
          name="name1"
          control={control}
          rules={{ required: true }}
          render={({ field }) => (
            <CustomInput
              name={field.name}
              value={field.value}
              onChange={field.onChange}
              onBlur={field.onBlur}
              errors={errors}
            />
          )}
        />
        <Controller
          name="name2"
          control={control}
          rules={{ required: true }}
          render={({ field }) => (
            <CustomInput
              name={field.name}
              value={field.value}
              onChange={field.onChange}
              onBlur={field.onBlur}
              errors={errors}
            />
          )}
        />
        <button type="submit">Send</button>
      </form>
    </FormProvider>
  );
};

Versions used:

"@radix-ui/react-dialog": "1.0.5",
"react-hook-form": "7.48.2",

Any ideias on what might be missing?

Thanks in advance.

[theskillwithin]

@riddleit did you ever figure this out, im having a similar issue

[kylemh]

I made a quick reproduction for this issue cuz I just encountered it:
https://codesandbox.io/p/devbox/dfj34d

This one seems hopefully dissimilar to the various issues about react-select, because no node is being removed. Just the innerText of the

<span>{errors[`${name}`] ? `ERROR ${name}` : ""}</span>

(typically using id attribute linked to an id whose value is also used on aria-errormessage or aria-describedby).

I saw one issue talk about this block of source code and I wonder if this line specifically is causing the issue since the content of the error message container might be considered "children"?

@chaance any ideas for workarounds? I don't really see one besides killing focus trap in the dialog which I'm uninterested in doing.

[kylemh]

i think this PR solves the issue and it looks similar to how react-aria-components handles focus lock.