kettanaito / react-advanced-form

Functional reactive forms. Multi-layer validation, custom styling, field grouping, reactive props, and much more.
https://redd.gitbook.io/react-advanced-form
MIT License
217 stars 24 forks source link

Obsolete value of "nextValue" property in debounced onChange handler #341

Closed kettanaito closed 5 years ago

kettanaito commented 5 years ago

What

nextValue points to the obsolete (step-back) value of the field when it has a debounced logic within onChange handler.

Why

Pointer issue.

How

export default class FieldUnmounting extends React.Component {
  state = {
    username: '',
  }

  handleUsernameChange = debounce(({ nextValue }) => {
    this.setState({ username: nextValue })
  }, 1000)

  render() {
    const { username } = this.state

    return (
      <React.Fragment>
        <h1>Debounced change</h1>

        <Form>
          <Input name="username" onChange={this.handleUsernameChange} />
          <p>{username}</p>
        </Form>
      </React.Fragment>
    )
  }
}
  1. Enter "admin" into the field.
  2. Slowly remove all the letters with backspace, with an interval between key stores lying within the debounce duration.
  3. See the this.state.username value being a when the field is empty.

This doesn't affect the fieldProps, so both internal representation and derived props on the <input/> have the proper value, but the one exposed as nextValue points to the a instead of an empty string.