Allow Controller to specify custom onBlur/onChange handlers

[jannisg]

I am currently working with RHF and am integration an "auto save" feature that triggers on the onBlur event.

To be clear, RHF already supports this using render props! This discussion is about whether it would be a nicer API to allow these to be specified on the <Controller /> directly.

---

Currently working:

Using render props to compose a new custom onBlur handler for the field works as expected.

const now = (
  <Controller
    name="myField"
    control={control}
    rules={{ required: true }}
    render={({ onBlur, ...renderProps }) => (
      <TextField
        label="My Field Label"
        helperText="Some value"
        required
        {...renderProps}
        onBlur={e => {
          e.persist();
          onBlur(e);
          myCustomOnBlurLogic(e);
        }} />
    )}
  />
);

Proposal:

Currently, this code would not trigger the onBlur as the internal handler from Controller overwrites the onChange and onBlur handlers without calling any custom handlers that may have been defined.

const proposal = (
  <Controller
    name="myField"
    control={control}
    as={TextField}
    rules={{ required: true }}
    {/* use the merge for TextField props */}
    required
    label="My Field Label"
    helperText="Some value"
    {/* Proposal: Allow event handler extension */}
    onBlur={myCustomOnBlurLogic}
  />
);

---

The reason I like the proposed example is that it is more inline with how the current onFocus handler is exposed and (to me) feels more natural to write as I can think of the Controller like a wrapper around my field with all non-Controller props being forwarded to my custom component.

Anyway, no big deal to write it the first, working, way but would be curious to hear if the extension pattern is something that could be supported in the future :)

[bluebill1049]

hey @jannisg that's actually the API with V5: https://react-hook-form.com/v5/api#Controller however it does issues, especially way too many props to be taking care of. In fact, in the next major version, we will most likely deprecate as props. thanks for the suggestion and feedback tho 👍

[jannisg]

Thanks for the reply!

If the as prop goes away, it might be nice to expose the <Controller /> props as something the render function receives too.
I think currently it does (field, meta) => ... might be nice to have (field, meta, controllerProps) => ... or something like that.

Anyway, appreciate the reply and the lib :)

[bluebill1049]

Thanks @jannisg 👍 I think if you need those props from the consumer, useController maybe what you after

function Test(controllerProps) {
  const { filed, } = useController();
  
  return xxxx
}

[Wenceslauu]

Are there plans for this API coming back? @bluebill1049

For now, I'm overwriting the onBlur and updating a context store with the blurred field

<Controller
  control={control}
  render={({ field: { onChange, onBlur, value } }) => (
    <TextInput
      onBlur={() => {
        setRoutine((prevRoutine: any) => ({
          ...prevRoutine,
          description: value,
        }));
      
        onBlur();
      }}
      // other props

Would there be any performance gain in using handleSubmit rather than accessing the value directly here?