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): /