Material-ui: [TextField] Mask

[cezarsmpio]

1) There is an idea for apply masks in textfields?
2) Why I need pass props like fullWidth={true}, why not simply pass fullWidth? Because single props without values returns a bool.

Example:

<TextField mask="9999-9999-9999-9999" />
<TextField mask="99-999-aaa" fullWidth primary raised />

Thanks!

[celsofabri]

Nice idea +1

[matheus-vieira]

That would make coding a little bit simpler +1

[oliviertassinari]

I don't get it. Why is 2) not working?

In JSX when using a boolean attribute you can set the attribute value to true or omit the value.

[cezarsmpio]

Hi @oliviertassinari, 2) it's working perfectly! Sorry. I saw only the documentation and thought it would only be that way.

Why 1) isn't a good idea?

[oliviertassinari]

1) mask is a good feature. But is this specific to material-ui?
2) Do you have an example of a failing usage of the omited value?

[cezarsmpio]

1) Yes, include on material-ui specification. Native.
2) Sorry, it was my fault. Forget it ;)

[dobryanskyy]

Indeed, please add this. I've tried using third-party mask library, and it's a nightmare to integrate something with a TextField. Finally i gave up on this.

[kybarg]

Sould I implement it in #6566 with help of https://github.com/text-mask/text-mask/ or more simple https://github.com/insin/react-maskedinput ?

[mbrookes]

@kybarg react-maskedinput does look simpler, but it also looks less well maintained. How about if TextField took a prop to substitute the <input> element with an arbitrary React component and passed the mask prop (&&|| a more generic inputProps) to it?

[kylem038]

Not sure if this is too late @dobryanskyy or if this is of use to anyone else, but this is how I added the text-mask onto a MUI v1 input.

Parent component

          <Input
            classes={{
              underline: classes.underline,
            }}
            inputComponent={OurMaskedInput}
          />

OurMaskedInput

import React from 'react';
import MaskedInput from 'react-text-mask';
import { withStyles } from 'material-ui/styles';
import detailStyleSheet from './LocationDetailStyles';

const OurMaskedInput = (props) => {
  const classes = props.classes;

  return (
    <div>
      <MaskedInput
        mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
        placeholderChar={'\u2000'}
        showMask
        className={classes.maskedInput}
      />
    </div>
  );
};

export default withStyles(detailStyleSheet)(OurMaskedInput);

Because we're only replacing the html input element we needed to replicate the styles MUI places via the input and inputSingleline classes.

maskedInput: {
    height: '1em',
    font: 'inherit',
    color: 'currentColor',
    width: '100%',
    border: 0,
    margin: 0,
    padding: '7px 0',
    display: 'block',
    boxSizing: 'content-box',
    background: 'none',
    verticalAlign: 'middle',
  },

Did the trick for my use case.

[oliviertassinari]

@kylem038 This sounds like an excellent idea! Do you want to add a demo into the documentation? This would be a great addition to have https://github.com/text-mask/text-mask.

Also, https://github.com/s-yadav/react-number-format seems to be a good alternative. cc @rosskevin

[rosskevin]

@kylem038 I used react-number-format in our lib like:

<TextField
        InputProps={{ inputComponent: NumberFormat }}
</TextField>

It worked well, and should work for your input too (assuming you want all the extras TextField brings. It would be great if you would be willing to PR the demos.

[kylem038]

@oliviertassinari @rosskevin Would love to contribute and PR this. I have to admit, this would be my first contribution to MUI. Is there a place where I can see the preferred format for PR'ing into MUI?

[oliviertassinari]

@kylem038 There is no preferred format. At least, I don't see what you are referring to. Don't miss this CONTRIBUTING.md guide.

[dobryanskyy]

@kylem038 great solution, thanks.

[felipenmoura]

Hi.

I'm trying to implement this (using https://github.com/mui-org/material-ui/issues/2130#issuecomment-330364733 's example) on material-ui-next and I'm getting the error:

React does not recognize theinputRefprop on a DOM element.

This inputRef is being used inside the NumberFormat class, I don't use it at all.

// ...
elAttrs.InputProps.inputComponent = NumberFormat
// ...
return <TextField { ...elAttrs } />

I would love to use something like what was initially suggested:

// SO MUCH cleaner and simpler!
<TextField mask="99-999-aaa" />

[oliviertassinari]

@felipenmoura We have an example in the documentation. Don't miss it.
inputRef needs to be apply on the native input.