Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How Can I Mask My Material-UI TextField?

Tags:

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.

like image 233
Batuhan Tozun Avatar asked Aug 18 '17 14:08

Batuhan Tozun


People also ask

How do you customize a TextField in material UI?

To make a controlled text field, we can add the value and onChange props to the TextField . We have the name state which is passed into the value prop. And the handleChange function which is passed into the onChange prop.

How do I invalidate a TextField in material UI?

To invalidate a TextField in React Material UI, we set the error and helperText props of the TextField to display the error message we want. We set the error prop to make the TextField 's border red when we enter invalid input. And we set the helperText prop to display the error text at the bottom.

How do I hide the label in TextField material UI?

You can prevent the label from "shrinking" up with InputLabelProps={{shrink: false}} . This works but produces another bug in which the label never leave and you end up writing the text over the label.

How do I hide the TextField in React?

App Preview The user can show/hide the characters they have typed by checking/unchecking the checkbox.


3 Answers

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

Edit throbbing-bird-9qgw9

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:

Edit yl8p9jvq9

like image 195
Kuf Avatar answered Oct 11 '22 12:10

Kuf


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>
like image 36
Sylvester Avatar answered Oct 11 '22 13:10

Sylvester


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>
like image 25
piotros Avatar answered Oct 11 '22 13:10

piotros