fix: use functional state updater in validateInput to prevent stale closure
validateInput was directly mutating the formErrors state object and then spreading it. When handleSubmit called validateInput twice in succession, the second call operated on stale closure values because React batches state updates. Also fixed handleOnFocus for the same issue. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
committed by
Adolfo R. Brandes
parent
70ffc552b5
commit
5d8743fb29
@@ -93,28 +93,27 @@ const ResetPasswordPageInner = () => {
|
||||
};
|
||||
|
||||
const validateInput = (name, value) => {
|
||||
let fieldError = '';
|
||||
switch (name) {
|
||||
case 'newPassword':
|
||||
if (!value || !LETTER_REGEX.test(value) || !NUMBER_REGEX.test(value) || value.length < 8) {
|
||||
formErrors.newPassword = formatMessage(messages['password.validation.message']);
|
||||
fieldError = formatMessage(messages['password.validation.message']);
|
||||
} else {
|
||||
validatePasswordFromBackend(value);
|
||||
}
|
||||
break;
|
||||
case 'confirmPassword':
|
||||
if (!value) {
|
||||
formErrors.confirmPassword = formatMessage(messages['confirm.your.password']);
|
||||
fieldError = formatMessage(messages['confirm.your.password']);
|
||||
} else if (value !== newPassword) {
|
||||
formErrors.confirmPassword = formatMessage(messages['passwords.do.not.match']);
|
||||
} else {
|
||||
formErrors.confirmPassword = '';
|
||||
fieldError = formatMessage(messages['passwords.do.not.match']);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
setFormErrors({ ...formErrors });
|
||||
return !Object.values(formErrors).some(x => (x !== ''));
|
||||
setFormErrors((prev) => ({ ...prev, [name]: fieldError }));
|
||||
return !fieldError;
|
||||
};
|
||||
|
||||
const handleOnBlur = (event) => {
|
||||
@@ -130,7 +129,7 @@ const ResetPasswordPageInner = () => {
|
||||
};
|
||||
|
||||
const handleOnFocus = (e) => {
|
||||
setFormErrors({ ...formErrors, [e.target.name]: '' });
|
||||
setFormErrors((prev) => ({ ...prev, [e.target.name]: '' }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
|
||||
Reference in New Issue
Block a user