title: MDCTextInputController error messages cover entered text
body: <p>Using material-components/material-components-ios v85.8.0</p>
  
  <pre class="lang-swift prettyprint-override"><code>import MaterialComponents
  
  ....
  
  var usernameTextField = MDCTextField()
  var userNameTextLayout = MDCTextInputControllerUnderline()
  usernameTextField = {
      let usernameTextEdit = MDCTextField()
      usernameTextEdit.translatesAutoresizingMaskIntoConstraints = false
      usernameTextEdit.clearButtonMode = .unlessEditing
      usernameTextEdit.backgroundColor = .white
      return usernameTextEdit
  }()
  userNameTextLayout.textInput = usernameTextField
  userNameTextLayout.placeholderText = "Username"
  // add to view
  ....
  
  private func isUserNameValid() -&gt; Bool {
      let enteredUsername = usernameTextField.text ?? ""
      if (!enteredUsername.isValidEmail) {
          userNameTextLayout.setErrorText("Invalid e-mail address",
                                          errorAccessibilityValue: nil)
          return false
      }
  }
  </code></pre>
  
  <p>Error messages cover the text entered and it looks bad:
  <a href="https://i.stack.imgur.com/3Vh73.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Vh73.png" alt="iOS"></a></p>
  
  <p>Android material design does however place the error underneath the line:
  <a href="https://i.stack.imgur.com/yWWfN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yWWfN.png" alt="Android"></a></p>
  
  <p>Was wondering if there's a way to do that, or if I'm doing it wrong. </p>
  
  <p>I followed their tutorial: <a href="https://codelabs.developers.google.com/codelabs/mdc-101-swift/#2" rel="nofollow noreferrer">https://codelabs.developers.google.com/codelabs/mdc-101-swift/#2</a></p>