CODEWITHSUNDEEP
reactjsmaterial-ui
AnKing
AnKing

Reputation: 2174

Render "outlined" input when using react-text-mask with Material-UI inputs

I'm unable to figure out how to render outlined input type(one of the standard Material-UI input styles when used with text mask).

I copied the code sample from here: https://material-ui.com/components/text-fields/ But it only gives a sample for regular(underlined) input but nothing for outlined.

This is what i'm trying to do but it doesnt work:

const ExpirationMask = props => {
  const { inputRef, ...other } = props

  return <MaskedInput
      {...other}
      ref={ref => {inputRef(ref ? ref.inputElement : null)}}
      mask={[/\d/, /\d/,'/' ,/\d/, /\d/]}
      placeholderChar={'\u2000'}
    />
}

<FormControl
  variant='outlined'                         //this doesnt work
  fullWidth
>
<InputLabel>Expiration</InputLabel>
<Input
  value={ccExpiration}
  onChange={(e, v) => setCCExpiration(e.target.value)}
  placeholder='MM/YY'
  variant='outlined'                         //this doesnt work either
  inputComponent={ExpirationMask}
/>
</FormControl>

Upvotes: 2

Views: 1958

Answers (2)

Tracer482
Tracer482

Reputation: 13

Just to imporve the answer a bit, the Ourlined Input has a label property which will help create a legend element to make room in the border for the label. Should look like this:

<FormControl
  fullWidth
  margin='dense'
>
<InputLabel
  error={ccExpiration.trim().length < 5}
  color='primary'>
  Expiration
</InputLabel>
<OutlinedInput
  value={ccExpiration}
  onChange={(e, v) => setCCExpiration(e.target.value)}
  label="Expiration"
  placeholder='MM/YY'
  error={ccExpiration.trim().length < 5}
  inputComponent={ExpirationMask}
  label='Expiration'
/>
</FormControl>

Upvotes: 0

AnKing
AnKing

Reputation: 2174

I found a solution for it. I didn't realize that TextField is just a wrapper for the Input.

There is also another wrapper for the Input which is called OutlinedInput. So this was exactly what I ended up using:

<FormControl
  fullWidth
  margin='dense'
>
<InputLabel
  classes={{ root: classes.expInputRoot }}
  error={ccExpiration.trim().length < 5}
  color='primary'>
  Expiration
</InputLabel>
<OutlinedInput
  value={ccExpiration}
  onChange={(e, v) => setCCExpiration(e.target.value)}
  label="Expiration"
  placeholder='MM/YY'
  error={ccExpiration.trim().length < 5}
  inputComponent={ExpirationMask}
/>
</FormControl>

In doing so i encountered another problem however with an InputLabel that wasn't aligning properly(not sure if it is a bug or what), so i ended up manually changing styles for it like this:

 expInputRoot: {
    margin:'-8px 0 0 14px'
  }

Upvotes: 5

Related Questions