Changing values with form.setValues() in an onChange() handler removes reactive props #364
Description
Environment
- OS: macOS 10.12.6
- Node: 8.9.4
- NPM: 5.6.0
- react-advanaced-form: 1.6.7
What
Current behavior
When 2 fields that have a reactive prop (required) on the same field, and that field has an onChange handler that calls this.form.setValues(), the reactive props are removed.
Expected behavior
Calling setValues() from an onChange handler for a field upon which other fields react should not remove reactive props.
Use Case
The reason I was doing this was because I wanted to clear the values of 2 text boxes when I unchecked a checkbox on my form and both of those text boxes were required if the checkbox was checked.
How
I altered the SingleTarget reactive props example from your codebase to exhibit the problem. See below. Note that if you remove fieldThree from setValues() and only alter firstName the issue doesn't occur. Seems like it only happens if you modify more than one form field. Also, the fields that you modify with setValues() don't have to be the ones with the reactive props - they can be any other 2 fields.
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 {
handleChange = () => {
this.form.setValues({
firstName: "",
fieldThree: ""
})
}
render() {
return (
<React.Fragment>
<h1>Single target</h1>
<Form onSubmitStart={this.props.onSubmitStart} ref={(form) => this.form = form}>
<Input
name="firstName"
label="First name"
hint="Required when `lastName` has value"
required={({ get }) => {
return !!get(['lastName', 'value'])
}}
/>
<Input name="lastName" label="Last name" onChange={this.handleChange} />
<Input
name="fieldThree"
label="Some field three"
hint="Required when `lastName` has value"
required={({ get }) => {
return !!get(['lastName', 'value'])
}}
/>
<Button>Submit</Button>
</Form>
</React.Fragment>
)
}
}