Fields with Reactive Rules are not reset to a good state when the required attribute is conditional on another field's value #375
Description
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.
- Modify SingleTarget.jsx with the code below. Run
npm run storybook - begin typing a value in lastName. Notice the red outline on the other 2 fields.
- Now remove the value you just typed.
- 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>
)
}
}