Feature: custom input registration about remix-forms

[danielweinmann]

Yup, the register approach is for uncontrolled components only. If you'd like to make it work with controlled components, you'll need to use Controller or implement value and onChange by hand, using setValue to set the value.

But I think the API you suggested is good for uncontrolled custom inputs. I'll leave the issue open until we implement it.

[samjohnduke]

Note - For those who see the above and a wondering whats going on. When using Controller, if the render of the controller doesn't put a hidden or otherwise input into the dom, this won't work. So its a matter of adding

<Controller
  name="dateStart"
  control={control}
  render={({ field }) => (
    <>
     <input name={field.name} value={field.value} type="hidden" />
      <Calendar
        id={field.name}
        value={field.value}
         onChange={(e) => field.onChange(e.value)}
       />
    <>
  )}
/>

Hope this helps

[wladpaiva]

Swweeeet, I think we can move with this API. The controller component doesn't care we have registered it before. I'll take a dive into the code later to see if I can manage to make that

[danielweinmann]

Hey, @wladiston! That's a great idea and I agree with your suggested API :D thanks!

Would you like to send a PR with this?

[wladpaiva]

Probably not... I'm doing some tests with that build-in registration and I'm running into some trouble.

I have this scenario where I'm usiing a 3rd party phone number input that masks the user input with the correct country format. This component only exposes controllable props. It only works well with the defaultValues and etc, if I let the component Controller from react-hook-form handles the registration and render for me.

import { useForm, Controller } from "react-hook-form";
import PhoneInput, { isValidPhoneNumber } from "react-phone-number-input";
....
        <Controller
          name="phone-input"
          control={control}
          rules={{
            validate: (value) => isValidPhoneNumber(value)
          }}
          render={({ field: { onChange, value } }) => (
            <PhoneInput
              value={value}
              onChange={onChange}
              defaultCountry="TH"
              id="phone-input"
            />
          )}
        />

Forgot to mention that if I make the registration by myself this. component breaks miserably. On those kinda of components we don't want preregister anythiing

PS: they are actually mention that in their doc
https://react-hook-form.com/api/usecontroller/controller/

React Hook Form embraces uncontrolled components and native inputs, however it's hard to avoid working with external controlled component such as React-Select, AntD and Material-UI. This wrapper component will make it easier for you to work with them.

[halindraprakoso]

I'm still struggling with this. I'm using primereact controlled component and the dateStart value is always null. Am I missing something?

...
 {({ Field, Button, Errors, control }) => (
          <>
            <Field name="dateStart">
              {({ Label, Errors }) => (
                <>
                  <Label />
                  <Controller
                    name="dateStart"
                    control={control}
                    render={({ field }) => (
                      <Calendar
                        id={field.name}
                        value={field.value}
                        onChange={(e) => field.onChange(e.value)}
                      />
                    )}
                  />
                  <Errors />
                </>
              )}
            </Field>
...

I'm following primereact's example: https://www.primefaces.org/primereact/reacthookform/

[danielweinmann]

I'm closing this issue because - at least for now - we don't want to increase our API with helpers for custom components when react-hook-form already has a great API for that.