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

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 2

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>

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

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 5

<InputMask 
 mask="99999" // Format you need implemented
 value={cellNumber}
 onChange={this.inputHandler}
 placeholder="Cell Number"
 name="cellNumber" 
 required disableUnderline 
 style={style.inputfeild} 
 maskChar= {'_'}> // To display when there is no character typed

 {(inputProps) =>
  <Input {...inputProps}/>}

 </InputMask>

Just provide all your props to InputMask and then pass them as input props to the call back method in which you display your Textfield or Input field and it should work just fine.