Skip to content

🧱 feature: disable prop for useForm#10496

Merged
bluebill1049 merged 24 commits into
masterfrom
form-disabled
Oct 7, 2023
Merged

🧱 feature: disable prop for useForm#10496
bluebill1049 merged 24 commits into
masterfrom
form-disabled

Conversation

@bluebill1049

@bluebill1049 bluebill1049 commented Jun 4, 2023

Copy link
Copy Markdown
Member

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

codesandbox Bot commented Jun 4, 2023

Copy link
Copy Markdown

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


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

@github-actions

github-actions Bot commented Jun 4, 2023

Copy link
Copy Markdown
Contributor

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

@bluebill1049 bluebill1049 changed the title feature: disable prop for useForm feature: disable prop for useForm Jun 4, 2023
@bluebill1049 bluebill1049 marked this pull request as ready for review June 4, 2023 11:47
@bluebill1049 bluebill1049 changed the title feature: disable prop for useForm 🧱 feature: disable prop for useForm Jun 25, 2023
@glekner

glekner commented Jun 28, 2023

Copy link
Copy Markdown
Contributor

cc @bengry

@stale

stale Bot commented Aug 10, 2023

Copy link
Copy Markdown

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 ❤️

@stale stale Bot added the stale label Aug 10, 2023
@vimtor

vimtor commented Sep 15, 2023

Copy link
Copy Markdown

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

Copy link
Copy Markdown
Member Author

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

vimtor commented Sep 15, 2023

Copy link
Copy Markdown

@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

Copy link
Copy Markdown
Member Author

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

vimtor commented Sep 16, 2023

Copy link
Copy Markdown

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

Copy link
Copy Markdown
Member Author

should be patched in the next release.

@mp3por

mp3por commented Aug 30, 2024

Copy link
Copy Markdown

Please look at this discussion: https://github.com/orgs/react-hook-form/discussions/11057

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants