Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/Field.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,9 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
this.validatePromise = promise;
this.errors = [];

// Force trigger re-render since we need sync renderProps with new meta
this.reRender();

promise
.catch(e => e)
.then((errors: string[] = []) => {
Expand Down
34 changes: 33 additions & 1 deletion tests/validate.test.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable no-template-curly-in-string */
import React from 'react';
import { mount } from 'enzyme';
import Form, { Field } from '../src';
import Form, { Field, useForm } from '../src';
import InfoField, { Input } from './common/InfoField';
import { changeValue, matchError, getField } from './common';
import timeout from './common/timeout';
Expand Down Expand Up @@ -578,5 +578,37 @@ describe('Form.Validate', () => {
wrapper.update();
matchError(wrapper, false);
});

it('submit should trigger Field re-render', () => {
const renderProps = jest.fn().mockImplementation(() => null);

const Demo = () => {
const [form] = useForm();

return (
<Form form={form}>
<Field
name="test"
rules={[{ validator: async () => Promise.reject(new Error('Failed')) }]}
>
{renderProps}
</Field>
<button
type="button"
onClick={() => {
form.submit();
}}
/>
</Form>
);
};

const wrapper = mount(<Demo />);
renderProps.mockReset();

// Should trigger validating
wrapper.find('button').simulate('click');
expect(renderProps.mock.calls[0][1]).toEqual(expect.objectContaining({ validating: true }));
});
});
/* eslint-enable no-template-curly-in-string */