Clear a field's value on input clear in react-final-form

Question

I'm using a custom component with react-final-form. On input change it sets the value to the address field. But when the input is cleared it doesn't update the value of the field. So I'm trying to do it with form mutators.

I have already added a mutator for clearing the field:

mutators={{
  clear: ([address], state, { changeValue }) => {
    changeValue(state, "address", () => undefined);
  }
}}

I tried to add it to my custom onChange function, but it doesn't work.

onChange={event =>
  props.input.onChange !== undefined
    ? props.input.onChange({ value: event })
    : form.mutators.clear
}

Or maybe this can be done without mutators at all? I would really appreciate your help. Here is a live example (clearing the field works only on the button click as onClick={form.mutators.clear}).

Streetman

you forgot to execute it, change form.mutators.clear => form.mutators.clear() should work. – Riverside

Answer 1

You can just call form.change('address', undefined) at any time that you'd like to clear the value.

Reposeful

Thank you for your reply. I tried to add it to the Clear button here codesandbox.io/s/…, but the component doesn't work now (the field doesn't get any value onChange). Also my question is, how can I call this function (or form.mutators.clear) when the input is cleared, i. e. when the user deletes what he has typed. – Streetman

when the field for clear its part of the object is there option ? i tried but empty all object – Aharon

Answer 2

All the default callback are handle by the component. If you want to do a clear with a button click, you can create a custom component and use native callback methods do your thing.

onChange = (event) => {
  this.setState({
    address:event.target.value
  });
}

onClear = () => {
  this.setState({
    address:''
  });
}

<div>
  <Field name="address">
      <div>
        <input
          value={this.state.address}
          onChange={this.onChange}
        />
      </div>
  </Field>
  <button onClick={this.onClear}>Clear</button>
</div>

Offish

Thank you for your reply. But I already have a button, which clears the input with {form.mutators.clear}. My question is, how can I clear the address field when a user deletes the value from the input. – Streetman

You can see the example hear codesandbox.io/s/… – Streetman

Answer 3

The problem is not with the react-final-form in your code, it is due to the react-da data, I have played a lot around your code within 1 day, and checked reset is working with fine with the react-final-form

Just update your render with this code and see reset is working absolutely fine. Yeah! the problem is with react da data. I am not sure about what it does due to less official information for this package.

 <div className="App">
      <h2>Dadata test</h2>
      <Form
        mutators={{
          clear: ([address], state, { changeValue }) => {
            changeValue(state, "address", () => undefined);
          }
        }}
        onSubmit={onSubmit}
        render={({ form, handleSubmit, pristine, invalid, values, errors }) => (
          <form onSubmit={handleSubmit} noValidate>
            <Field name="address" component="input" />
              {/* {props => (
                <div>
                  <ReactDadata
                    token="d19c6d0b94e64b21d8168f9659f64f7b8c1acd1f"
                    onChange={event =>
                      props.input.onChange !== undefined
                        ? props.input.onChange({ value: event })
                        : form.mutators.clear
                    }
                  />
                </div>
              )}
            </Field> */}
            <button type="submit" disabled={invalid}>
              Submit
            </button>
            <button type="button" onClick={form.reset}>
              Clear
            </button>
            <Fields names={["address"]}>
              {fieldsState => (
                <pre>{JSON.stringify(fieldsState, undefined, 2)}</pre>
              )}
            </Fields>
          </form>
        )}
      />
    </div>

Hope it will help you to resolve the problem.

Appenzell

Hi, thank you for you reply. But I don't need to use form.reset. The address field will be only one of the fields in the form. So I need to find a way to clear the value for this only field when the input itself is cleared. You can type Москва, select one of the suggestions and then clear the input, to see how it works. – Streetman

Basically, I need to integrate form.mutators.clear into my onChange function, or find another way to clear address value when the input is cleared. – Streetman

Have you tried form.resetFieldState it will reset the value of a particular field. I think it perfect alternative to serving your purpose – Appenzell

Could you please show an example here codesandbox.io/s/…? – Streetman