Field with reactive "required" retains invalid state after becoming optional

[kettanaito]

Environment

• react-advanaced-form: 1.6.0

What

Current behavior

When a field with the reactive required prop changes its value to false, the subscriber field is still validated to invalid: true.

Expected behavior

A field with reactive prop (i.e. required) must be validated properly when the reactive prop value toggles.

Why

1. Validation originating from reactive resolver is forced: true
2. Thus, shouldValidateSync predicate resolves to true
3. Thus, relevant rules.type.tel rule is executed on an empty field
4. Resulting into invalid field from the validation.

The reason is that the validation resolver is invoked when it shouldn't. The relation with the forced nature of reactive validation is not correct.

How

import React from 'react'
import { Form } from 'react-advanced-form'
import { Input, Checkbox } from '@examples/fields'

const rules = {
  type: {
    tel: ({ value }) => /^\+420/.test(value),
  },
}

export default class FooExample extends React.Component {
  render() {
    return (
      <Form rules={rules}>
        <Input
          type="tel"
          name="phone"
          label="Phone"
          required={({ get }) => get(['some', 'checked'])}
        />
        <Checkbox name="some" label="Accept" />
      </Form>
    )
  }
}

Thank you notes to @ludovitkapusta for reporting this issue.

[kettanaito]

Removing the forced nature of reactive calls to field validation fixed the issue. If a field state is reset via resetValidationState, then there is no need to force the validation, as the field is treated like it hasn't been validated previously.

This means that the predicates of shouldValidateSync (especially !fieldProps.validatedSync) will resolve properly.

[kettanaito]

Published under 1.6.2.