Skip to content

Commit

Permalink
fix(form.control): shouldResetWithUnmount isn't working
Browse files Browse the repository at this point in the history
when several components unmount at the same time,
React will call them one by one, and the later ones will overwrite the earlier ones
  • Loading branch information
myNameIsDu committed Feb 7, 2023
1 parent 9806267 commit b980b39
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 6 deletions.
2 changes: 2 additions & 0 deletions src/Form/Form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,7 @@ const Form: FormComponent = React.forwardRef((props: FormProps, ref: React.Ref<F
* so use Ref to get future error
*/
const formError = omit(realFormErrorRef.current, [name]);
realFormErrorRef.current = formError;
setFormError(formError);
onCheck?.(formError);
},
Expand All @@ -325,6 +326,7 @@ const Form: FormComponent = React.forwardRef((props: FormProps, ref: React.Ref<F
* so use Ref to get future value
*/
const formValue = omit(realFormValueRef.current, [name]);
realFormValueRef.current = formValue;
setFormValue(formValue);
onChange?.(formValue);
},
Expand Down
19 changes: 13 additions & 6 deletions src/FormControl/test/FormControlSpec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -214,11 +214,11 @@ describe('FormControl', () => {
expect(alert).to.exist;
expect(input).to.have.attr('aria-errormessage', alert.getAttribute('id') as string);
});

it('Should remove value and error when shouldResetWithUnmount is true', () => {
let refValue = { username: '', email: '' };
let refValue = { username: '', email: '', password: '' };
let refError = {};
const model = Schema.Model({
password: Schema.Types.StringType().maxLength(2, 'The length cannot exceed 2'),
username: Schema.Types.StringType().maxLength(2, 'The length cannot exceed 2'),
email: Schema.Types.StringType().maxLength(2, 'The length cannot exceed 2')
});
Expand All @@ -244,6 +244,7 @@ describe('FormControl', () => {
formError={error}
formValue={value}
>
{email || <FormControl id="password" name="password" shouldResetWithUnmount />}
{email || <FormControl id="username" name="username" shouldResetWithUnmount />}
<FormControl id="email" name="email" />
</Form>
Expand All @@ -254,13 +255,19 @@ describe('FormControl', () => {
fireEvent.change(container.querySelector('#username') as HTMLInputElement, {
target: { value: 'username' }
});
assert.deepEqual(refValue, { username: 'username', email: '' });
assert.deepEqual(refError, { username: 'The length cannot exceed 2' });
fireEvent.change(container.querySelector('#password') as HTMLInputElement, {
target: { value: 'password' }
});
expect(refValue).to.deep.equal({ username: 'username', password: 'password', email: '' });
expect(refError).to.deep.equal({
username: 'The length cannot exceed 2',
password: 'The length cannot exceed 2'
});
fireEvent.change(container.querySelector('#email') as HTMLInputElement, {
target: { value: 'email' }
});
assert.deepEqual(refValue, { email: 'email' } as any);
assert.deepEqual(refError, { email: 'The length cannot exceed 2' });
expect(refValue).to.deep.equal({ email: 'email' });
expect(refError).to.deep.equal({ email: 'The length cannot exceed 2' });
});

describe('rule', () => {
Expand Down

0 comments on commit b980b39

Please sign in to comment.