How Can I Mask My Material-UI TextField?

Question

I have a TextField for phone numbers in a short form. And then i want to mask this form field like (0)xxx xxx xx xx.

I'm trying to use react-input-mask plugin with Material-UI. But if i want to change input value, this is not updating the my main TextField.

        <TextField
          ref="phone"
          name="phone"
          type="text"
          value={this.state.phone}
          onChange={this.onChange}
        >
          <InputMask value={this.state.phone} onChange={this.onChange} mask="(0)999 999 99 99" maskChar=" " />            
        </TextField>

Actually, I couldn't find any documentation for masking with Material-UI. I'm trying to figure out how can i use with another plugins.

Answer 1

Question:

codesandbox.io/s/q8v1259oq6 please check this my label test floatingLabelText is hidden How I solve. – Thilina Sampath

Work Around:

You can controll Label Position with "floatingLabelFixed" prop. At your handleChange look to state input value.

...when create with value:

constructor(props) {
    super(props);
    let value = props && props.value ? props.value : '';
    let floatingLabelFixed = !!value;

    this.state = {
        value,
        floatingLabelFixed,
    };

    this.handleChange = this.handleChange.bind(this);
}

...when edit (onChange):

handleChange(event) {
        let value = event && event.target && event.target.value ? event.target.value : '';
        let floatingLabelFixed = !!value;
        this.setState({
            value,
            floatingLabelFixed
        });
   }

...your input:

<TextField
        onChange={this.handleChange}
        value={this.state.value}
        floatingLabelFixed={this.state.floatingLabelFixed}/>

Answer 2

Update

versions: material-ui 0.20.2, react-input-mask 2.0.4

Seems like the API changed a bit:

<InputMask
  mask="(0)999 999 99 99"
  value={this.state.phone}
  disabled={false}
  maskChar=" "
>
  {() => <TextField />}
</InputMask>

Demo

Original

This should do the trick:

<TextField
  ref="phone"
  name="phone"
  type="text"
  value={this.state.phone}
  onChange={this.onChange}
>
  <InputMask mask="(0)999 999 99 99" maskChar=" " />
</TextField>

Demo:

Answer 3

This is valid for current version of react-input-mask and material-ui:

<InputMask
  mask="(0)999 999 99 99"
  value={this.state.phone}
  onChange={this.onChange}
>
  {() => <TextField />}
</InputMask>

Answer 4

For current version of Material-UI and react-input-mask, the following answer worked:

          <InputMask
            mask="(1)999 999 9999"
            value={self.state.inputValue}
            onChange={this.getTextFieldValue}
            className={this.props.classes.textField}
          >
            {() => <TextField
              id={attribute}
              label={attribute}
              name={attribute}
              className={this.props.classes.textField}
              margin="normal"
              type="text"
              />}
          </InputMask>