Skip to content

<PasswordInput/> or <TextInput/> has corrupted validate prop, if field is handled with disabled prop #9753

Open

Description

What you were expecting:
A <PasswordInput/> is activated with a toggle that basically handle the password field disabled prop. If toggle is not active, <PasswordInput/> is disabled, otherwise enabled. The password field has a validate prop, that defines a rule for the field. Rule is minimum 8 characters. If not respected, a red error occurs.

Clicking saving button I expect to submit the form, with or without password enabled, and if enabled with password longer at least 8 characters.

Clicking saving button I expect not to submit the form, with password enabled and password length shorter than 8 characters.

What happened instead:
With toggle enabled, password enabled and the password min length validation rule in place, I type a wrong password, long 3 characters.
I submit the form with password rule not respected. The validate prop is ignored, form is submitted anyway.

If the disabled prop is never set in <PasswordInput/>, validate prop works as expected.

Steps to reproduce:
Activate toggle for password field, type a short password, submit the form.

Related code:

  const { resetField } = useFormContext();
  const [resetPasswordEnabled, setResetPasswordEnabled] = useState(false);
  const onChangePasswordResetEnabled = useCallback<ChangeEventHandler<HTMLInputElement>>((event) => {
    resetField('password');
    setResetPasswordEnabled(event.target.checked);
  }, [resetField]);

  return (
    <TabbedForm>
      <TabbedForm.Tab label="Label">
        <BooleanInput
          label="Activate password change"
          source="activator"
          checked={resetPasswordEnabled}
          onChange={onChangePasswordResetEnabled}
        />
        <PasswordInput
          name="password"
          source="password"
          required={resetPasswordEnabled}
          disabled={!resetPasswordEnabled} // with this line fully removed, validate works
          validate={[minLength(8, 'Password at least 8 characters.')]}
        />
      </TabbedForm.Tab>
    </TabbedForm>
  );

Other information:
No error occurs after clicking save button

Environment

  • React-admin version: ^4.16.13
  • Last version that did not exhibit the issue (if applicable):
  • React version: ^18.2.0
  • Browser: all
  • Stack trace (in case of a JS error): /
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions