required elements aren't actually required

[d4l3k]

If you specify required on a paper-autocomplete element it's not actually required. It only requires something to be filled out in the paper-input element, but nothing actually has to be selected.

In this example something has been entered and the paper-input element required property is satisfied, but nothing has actually been selected.

$0.value
undefined
$0.validate()
true

[d4l3k]

As a hack, I have a wrapper element around it with the following code

    <paper-autocomplete
           id="input"
           required
           error-message="Required"
           ...
           value="{{value}}">
    </paper-autocomplete>

  validate () {
    const valid = this.$.input.validate() && this.value && this.value.length > 0
    if (!valid) {
      this.$.input.root.querySelector("paper-input").invalid = true
    }
    return valid
  }