field-form icon indicating copy to clipboard operation
field-form copied to clipboard

Field with dependencies is not rerendered when dependent field finishes validation

Open queimadus opened this issue 4 years ago • 1 comments

In the following example, editing the username field will update the dependant field value but not the errors.

<Form>
  <Field name="username" rules=[{ required: true }]}>
    <Input />
  </Field>
         
  <Field dependencies={["username"]}>
    {(controls, meta, context) => (
      <div>
        <div>Value: {context.getFieldValue("username") || "null"}</div>
        <div>Errors: {context.getFieldError("username").join(", ")}</div>
      </div>
    )}
  </Field>
<Form>

Reproduction: https://codesandbox.io/s/antd-reproduction-template-forked-5ux1r?file=/index.js

The same behavior can only be achieved via a shouldUpdate={true} as using a custom shouldUpdate where we only compare the previous and current values of the username field would not work as value would be the same when info.type="validationFinish" triggers. Using shouldUpdate={true} is undesirable given the performance implications. Another option would be to add further information the 3rd parameter passed to shouldUpdate so the user can better choose when to rerender.

The above is the simplified use case. The real use case is to extract the form's item errors and render them via a custom component.

Related to https://github.com/ant-design/ant-design/issues/26888.

queimadus avatar Jun 23 '21 14:06 queimadus

I tested something like adding:

(dependencies.map(getNamePath).some(dependency => containsNamePath(namePathList, dependency)) && info.type === "validateFinish") ||

here https://github.com/react-component/field-form/blob/b581a34c1631524e5869de6ac538881b5754a30f/src/Field.tsx#L332

Let me know if you'd be interested in this approach and I can open a PR.

queimadus avatar Jun 23 '21 14:06 queimadus