title: Allowing numeric input in textfield doesn't work for first character
body: <p>I have a Material UI phone number text field that only takes numbers.</p>
  
  <pre><code>//in helper function
  export function allowNumbersOnly(input) {
      const formattedInput = input.replace(/[^\d]/g, '')
      return formattedInput
  }
  
  //in component
  constructor(props) {
      super(props)
  
      this.handleUpdateField = this.handleUpdateField.bind(this)
  }
  
  handleUpdateField(field, value) {
      this.setState({
          [field]: value
      })
  }
  
  render() {
      &lt;TextField floatingLabelText="Phone" value={phone} maxLength="10"
          onChange={(e) =&gt; this.handleUpdateField('phone', allowNumbersOnly(e.target.value))} /&gt;
  }
  </code></pre>
  
  <p>In the <code>onChange</code> event handler, I'm passing in the new value that should only contain numbers, because any other input that isn't a number becomes an empty string. It works when I start typing a number (i.e. <code>798fff</code> would stop at <code>798</code> and any other input that's a non-number will not show); however, if I start the input with <code>f</code> and continue typing, i.e. <code>ff</code>, all of that gets recorded as input. <a href="https://i.stack.imgur.com/DH6Vg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DH6Vg.png" alt="enter image description here"></a></p>
  
  <p>I'm not sure if I've written my helper function incorrectly, or if I'm attaching the event handler wrong. Thanks for the help in advance!</p>