title: Text field validation in material UI using error property
body: <p>I am trying to set an error property in my React UI app, such that when the text box exceeds a maximum number of characters, then the error property is set, and the text box is highlighted in a red colour. I am basing the logic from <a href="https://mui.com/components/text-fields/#validation" rel="nofollow noreferrer">https://mui.com/components/text-fields/#validation</a></p>
  <p>However, the red colour is only presented when the user clicks outside of the textbox; it remains as the default colour until this event occurs.</p>
  <p>Can you tell me if its possible to render the red error colour around the text box without the need for having to click outside of the text box, i.e. whilst the user is within the textbox.</p>
  <p>Text field:-</p>
  <pre><code>&lt;TextField
    fullWidth
    rowsMax={1}
    autoFocus=&quot;autofocus&quot;
    className={classes.textField}
    id={modalConfig.textField.id}
    helperText={textInputErrorMessage}
    label={modalConfig.textField.label}
    placeholder={modalConfig.textField.placeholder}
    variant=&quot;outlined&quot;
    value={textName}
    onChange={handleTextChange}
    error={textInputError}
  /&gt;
  </code></pre>
  <p>and my function:-</p>
  <pre><code>function handleTextChange(e) {
      setTextName(e.target.value);
      const checkedMaxTextLength = checkMaxTextLength(e.target.value);
      const checkedZeroTextLength = e.target.value.length === 0;
      setSaveDisabled(checkedMaxTextLength || checkedZeroTextLength);
      setTextInputError(checkedMaxTextLength);
      if (checkedMaxTextLength) {
        setTextInputErrorMessage(&quot;The input has exceeded the maximum number of characters&quot;);
      } else {
        setTextInputErrorMessage(null);
      }
    }
  </code></pre>