isFocusVisible is not set on elements using react-hook-form

[zommerberg]

Provide a general summary of the issue here

When I use react-hook-form I cannot focus WITH isFocusVisible on the Select element.

The Select element itself gets the focus but without the isFocusVisible I cannot render a propper ring around the select.

Recording.2024-07-31.182643.mp4

NOTE: I do understand that the components exposes a isFocused property that i could use to render the outline but that also means that after I select an element the outline will still be visible which is unwanted behavior.

🤔 Expected Behavior?

Once focus is set on the component via react-hook-form it should add the isFocusVisible property to it so the outline is shown.

😯 Current Behavior

No isFocusVisible gets set for Select, RadioGroup, CheckboxGroup etc...

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://github.com/zommerberg/react-aria-hook-form-bug

Version

"react-aria-components": "^1.3.1",

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

This is a bit tricky, we handle this in our own native form validation via https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/form/src/useFormValidation.ts#L67. We have to set keyboard modality manually here since we don't want to set isFocusVisible=true for all programmatic focus movements (see https://react-spectrum.adobe.com/blog/building-a-button-part-3.html#focus-rings for a break down of some of the scenarios). However, since react-hook-form is handling the validation, that code path doesn't happen, so ideally there would be some way to have react-hook-form set keyboard modality here. I guess you could do something like

  const onInvalid = () => {
    setInteractionModality('keyboard');
  }
  ...
<Form onSubmit={handleSubmit(onSubmit, onInvalid)}

but setInteractionModality comes from @react-aria/interactions directly and isn't exported from the mono repo. Not sure if we could handle this case automatically on our end

[zommerberg]

setInteractionModality("keyboard"); Does the trick for me. I made my own reusable useReactAriaHook form that will always call it on error.

import {
  useForm,
  UseFormProps,
  UseFormReturn,
  FieldValues,
  UseFormHandleSubmit,
} from "react-hook-form";
import { setInteractionModality } from "@react-aria/interactions";

export function useReactAriaForm<
  TFieldValues extends FieldValues = FieldValues,
  TContext = any
>(
  props?: UseFormProps<TFieldValues, TContext>
): UseFormReturn<TFieldValues, TContext> {
  const form = useForm<TFieldValues, TContext>(props);

  const enhancedHandleSubmit: UseFormHandleSubmit<TFieldValues> = (
    onValid,
    onInvalid
  ) => {
    return form.handleSubmit(onValid, (errors, event) => {
      setInteractionModality("keyboard");
      if (onInvalid) {
        onInvalid(errors, event);
      }
    });
  };

  return {
    ...form,
    handleSubmit: enhancedHandleSubmit,
  };
}

Which then allows me to use it like this:

@LFDanLu Do you think it is a good idea to update the react-hook-form documentation with that example?

[LFDanLu]

Glad it works for you! Documentation would definitely be nice, but I'm a bit wary about exposing setInteractionModality since it really isn't supposed to be public api. Lemme chat with the team about if there are any alternatives or if we need to setup a helper of sorts rather than exposing that setter directly.

[LFDanLu]

Sorry about the delay, the team discussed this and we'll want to make a helper utility for this (the helper utility would handle setting the keyboard modality and possibly allow a user to specify a element to focus as well). For now it would be best not to use setInteractionModality directly if possible because it isn't public api, could you try dispatching a keyboard event instead to trigger keyboard modality?