Fields with Reactive Rules are not reset to a good state when the required attribute is conditional on another field's value

[johnpreed]

Environment

• OS: macOS 10.12.6
• Node: macOS 10.12.6
• NPM: 5.6.0
• react-advanaced-form: 1.6.7

What

Current behavior

A field with a reactive rule does not reset to a non-error state after its error state has been initially triggered. To clarify, if a custom rule is set on a field and you set the required attribute to depend on another field having a value, it is not reset if you delete the value from the other field. To get the value back to a good state, you have to refresh the page in the browser.

Use Case

This is happening when I'm implementing a password change form between old, new and confirm password fields.

Expected behavior

If a field with a conditional required reactive prop has been triggered to an error state, if you remove the value from the field on which it depends, the field with the reactive rule should be set to a non-error state.

How

I modified the SingleTarget example in your codebase on the master branch to exhibit the bug.

1. Modify SingleTarget.jsx with the code below. Run npm run storybook
2. begin typing a value in lastName. Notice the red outline on the other 2 fields.
3. Now remove the value you just typed.
4. Notice the red outline is removed from firstName but not fieldThree. This also happens with custom validation messages. The validation message is not removed.

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

export default class RxPropsSingleTarget extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h1>Single target</h1>

        <Form onSubmitStart={this.props.onSubmitStart}>
          <Input
            name="firstName"
            label="First name"
            hint="Required when `lastName` has value"
            required={({ get }) => {
              return !!get(['lastName', 'value'])
            }}
          />
          <Input name="lastName" label="Last name" />
          <Input
            name="fieldThree"
            label="Some field three"
            hint="Must match when `lastName` has value"
            rule={({get, value}) => {
              return value === get(['lastName', 'value']);
            }}
            required={({ get }) => {
              return !!get(['lastName', 'value'])
            }}
          />
          <Button>Submit</Button>
        </Form>
      </React.Fragment>
    )
  }
}

[kettanaito]

Hi, @johnpreed. Thank you for reporting this. My apologies for getting back to you after such delay.

I think this issue has to do with concurrency of state updates. It's been a problematic aspect for long time, and I've tried to solve it once and for all under #354. It may also be related, if not identical, to #352.

I am quite busy with other things now, but I will try to publish that changes so you can test out if new state update mechanism would eliminate the issue you are describing.