🧱 feature: disable prop for useForm

[bluebill1049]

disabled prop

• new disabled props for useForm
• allow user to disable the entire form with all associated inputs

useForm({
  disabled: true
})

const App = () => {
  const [disabled, setDisabled] = useState(false);
  const { register, handleSubmit, control } = useForm({
    disabled,
  });

  return (
    <form
      onSubmit={handleSubmit(async () => {
        setDisabled(true);
        await sleep(100);
        setDisabled(false);
      })}
    >
      <input
        type={'checkbox'}
        {...register('checkbox')}
        data-testid={'checkbox'}
      />
      <input type={'radio'} {...register('radio')} data-testid={'radio'} />
      <input type={'range'} {...register('range')} data-testid={'range'} />
      <select {...register('select')} data-testid={'select'} />
      <textarea {...register('textarea')} data-testid={'textarea'} />

      <Controller control={control} render={({ field }) => <input disabled={field.disabled}  />} name="test" />

      <button>Submit</button>
    </form>
  );
}

[codesandbox]

This branch is running in CodeSandbox. Use the links below to review this PR faster.


  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders | Preview

[github-actions]

Size Change: +159 B (+1%)

Total Size: 20.1 kB

Filename	Size	Change
dist/index.cjs.js	10 kB	+83 B (+1%)
dist/index.umd.js	10.1 kB	+76 B (+1%)

_{compressed-size-action}

[glekner]

cc @bengry

[stale]

Thank you for your contributions! This Pull Request has been automatically marked as stale because it has not had any recent activity. It will be closed if no further activity occurs. Best, RHF Team ❤️

[vimtor]

I don't know if this is related, but components using fields like this:

<Controller
  control={control}
  render={({ field }) => (
    <TextInput
      disabled={true}
      {...field}
    />
  )}
/>

Stopped being disabled in the latest version ^7.46.1.

[bluebill1049]

I don't know if this is related, but components using fields like this:

<Controller
  control={control}
  render={({ field }) => (
    <TextInput
      disabled={true}
      {...field}
    />
  )}
/>

Stopped being disabled in the latest version ^7.46.1.

<Controller
  control={control}
  render={({ field }) => (
    <TextInput
      {...field}
      disabled={true}
    />
  )}
/>

should fix this.

[vimtor]

@bluebill1049 I know 😂😂

I posted it here just in case it was unintentional. I would expect that if the disabled prop is not specified in the useForm hook, disabled should be undefined when passed to the component.

[bluebill1049]

I posted it here just in case it was unintentional. I would expect that if the disabled prop is not specified in the useForm hook, disabled should be undefined when passed to the component.

I am pretty sure it returns undefined, could you verify it?

[vimtor]

I am pretty sure it returns undefined, could you verify it?

Well, my apologies since I thought that doing something like this in JavaScript resulted in disabled being true:

{
  disabled: true,
  disabled: undefined,
}

When in reality the disabled prop should not be passed altogether. I guess instead of making it undefined you could exclude it from the field props to not override any existing props?

I don't know, sorry for the confusion.

[bluebill1049]

should be patched in the next release.