How do I get my React TextField to open the number pad when inputting on a mobile device?

Question

I have a React TextField that is taking user input and it is representing a date. When the user clicks on the field I want the number keyboard to open instead of the full alphabet. I was looking at the React docs here and trying to mimic their example.

My TextField looks like the following:

  <TextField
    { ...materialConfiguration }
    floatingLabelFixed={value.length > 0}
    floatingLabelText={label}
    errorText={errorText}
    onChange={this.onChange}
    onKeyUp={this.debouncedOnKeyUp}
    onBlur={this.onBlur}
    type="number"
    label="Number"
    id="standard-number"
    >
    <Cleave value={value} options={{date: true, datePattern: ['m', 'd', 'Y']}} />
  </TextField>

I added the type label and id fields from the React example thinking that was what made the keyboard change but it does not work. How can I get this input to open the number pad?

The React example is this:

<TextField
  id="standard-number"
  label="Number"
  value={this.state.age}
  onChange={this.handleChange('age')}
  type="number"
  className={classes.textField}
  InputLabelProps={{
    shrink: true,
  }}
  margin="normal"
/>

Thanks

Answer 1

UPDATED in 2021

  <TextField id="quantity" label="Quantity" inputProps={{ inputMode: 'numeric' }}/>

using inputProps does solve the issue. inputProps object is attributes applied to the input element.

https://material-ui.com/api/text-field/#textfield-api

Answer 2

Yo have to add this attributes to your input tag:

<input type='number' inputMode='numeric' pattern="[0-9]*" />