[v1] How to focus invalid custom non-native inputs?

[halljus]

Conform automatically focuses the first invalid native input on submission attempts. In Conform v0.9.1, we could replicate that behavior for custom non-native input components by creating a hidden input, spreading Conform's input props on it, and adding our own onFocus handler that would then "forward" the focus event to the custom component (usually something like myCustomComponentRef.current?.focus()). How would we accomplish this in Conform v1?

The UI library integration docs mention control.focus and control.blur from useInputControl, but those seem to be for communicating "the other direction", right? They would be useful in telling Conform the input was focused/blurred, but we need the opposite - to tell the custom input that Conform wants to focus it.

[edmundhung]

I am trying to avoid requiring the developers to deal with the hidden input themselves with useInputControl. Not only because it simplify the integration, but also trying to avoid the chance we de-optimize it with a hidden input when it might not be necessary (e.g. A custom number input might have an input element but with a custom step control).

If you want to forward the focus just like Conform v0.9.1, you can render a hidden input similar to what you did previously or setup an event listener yourself. But I do plan to improve this and remove such need. One idea I have now is to give you a ref object that you can pass to the element you wanna focus to. e.g. control.elementRef.

function Example({ meta }) {
  const control = useInputControl(meta);

  return (
    <CustomInput
       ref={control.elementRef}
       value={control.value}
       onChange={control.change}
    />
  );
} 

One minor issue with this approach is the typing. As the element could be anything. Although I only cares whether the element can be focused (i.e. Anything that is HTMLElement would have a focus method). But Typescript is not happy if I pass a RefObject<HTMLElement> to a component with ref type RefObject<HTMLButtonElement> 😅 While this will work:

function Example({ meta }) {
  const control = useInputControl(meta);

  return (
    <CustomInput
       ref={element => {
         control.elementRef.current = element;
       }}
       value={control.value}
       onChange={control.change}
    />
  );
} 

[halljus]

Ok, so what I'm hearing is that it's not possible yet but it's on the roadmap? I did try doing it the 0.9.1 way via hidden input and the hidden input never received a focus event, so I was unable to forward it to the custom input. Are you sure this should work? The visually-hidden input method works for now.

As for the ref idea, in addition to typing, I wonder if it may also be too restrictive. There are a lot of custom inputs out there with various implementations and I'm sure at least some of them don't accept refs that way (but may give you other ways to imperatively interact with them, such as triggering focus).