React Form value not updating when toggling InputMask mask

Question

I have a input field that I apply a mask to using react-input-mask. I want to change the mask depending on a dropdown value. What is happening is when I change the dropdown value the new mask is applied on the UI but the form value does not get modified. So, when I submit the form the old mask is used. If I modify the value manually in the textbox then the form value change takes affect.

Here is an simplified example:

import React from "react";
import ReactDOM from "react-dom";
import InputMask from "react-input-mask";
import "antd/dist/antd.css";
import { Form, Select } from "antd";

const FormItem = Form.Item;

class FormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isMaskOne: true };
  }

  onSelectChange = e => {
    if (e === "one") {
      this.setState({ isMaskOne: true });
    } else {
      this.setState({ isMaskOne: false });
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form>
        <FormItem>
          <Select onChange={this.onSelectChange}>
            <Select.Option value="one" key="one">
              one
            </Select.Option>
            <Select.Option value="two" key="two">
              two
            </Select.Option>
          </Select>
        </FormItem>
        <FormItem>
          {getFieldDecorator("note")(
            <InputMask
              mask={this.state.isMaskOne ? "999-99-9999" : "99-9999999"}
              maskChar=""
            />
          )}
        </FormItem>
        <p>{JSON.stringify(this.props.form.getFieldValue("note"))}</p>
      </Form>
    );
  }
}

const WrappedFormComponent = Form.create()(FormComponent);

const rootElement = document.getElementById("root");
ReactDOM.render(<WrappedFormComponent />, rootElement);

If the numbers 123-45-6789 are enter into the text box with the dropdown selection of "one" then this.props.form.getFieldValue("note") returns 123-45-6789. When I change the dropdown to "two" I would expect this.props.form.getFieldValue("note") to return 12-3456789 but the value remains 123-45-6789 even though the text has changed to the new mask. What am I not understanding?

Answer 1

You need to use ref to access the input masked value, then you need to update the Form.Item using setFieldsValue i.e. this.props.form.setFieldsValue({ note: this.myRef.current.value });

class FormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isMaskOne: true };
    this.myRef = React.createRef();
  }

  onSelectChange = e => {
    if (e === "one") {
      this.setState({ isMaskOne: true }, () => {
        console.log("ref value:", this.myRef.current.value);
         this.props.form.setFieldsValue({ note: this.myRef.current.value });
      });
    } else {
      this.setState({ isMaskOne: false }, () => {
        console.log("ref value:", this.myRef.current.value);
         this.props.form.setFieldsValue({ note: this.myRef.current.value });
      });
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form>
        <FormItem>
          <Select onChange={this.onSelectChange}>
            <Select.Option value="one" key="one">
              one
            </Select.Option>
            <Select.Option value="two" key="two">
              two
            </Select.Option>
          </Select>
        </FormItem>
        <FormItem style={{ marginTop: "100px" }}>
          {getFieldDecorator("note")(
            <InputMask
              mask={this.state.isMaskOne ? "999-99-9999" : "99-9999999"}
              maskChar=""
              ref={this.myRef}
            />
          )}
        </FormItem>
        <p>{JSON.stringify(this.props.form.getFieldValue("note"))}</p>
      </Form>
    );
  }
}