diff --git a/src/vaadin-combo-box-mixin.html b/src/vaadin-combo-box-mixin.html index 981e164b..8909ea0f 100644 --- a/src/vaadin-combo-box-mixin.html +++ b/src/vaadin-combo-box-mixin.html @@ -934,6 +934,7 @@ /** @private */ _detectAndDispatchChange() { if (this.value !== this._lastCommittedValue) { + this.validate(); this.dispatchEvent(new CustomEvent('change', {bubbles: true})); this._lastCommittedValue = this.value; } @@ -1098,6 +1099,7 @@ } if (!this.readonly && !this._closeOnBlurIsPrevented) { this._closeOrCommit(); + this.validate(); } } @@ -1164,8 +1166,8 @@ * @return {boolean | undefined} */ checkValidity() { - if (this.inputElement.validate) { - return this.inputElement.validate(); + if (this.inputElement.checkValidity) { + return this.inputElement.checkValidity(); } } diff --git a/src/vaadin-combo-box.html b/src/vaadin-combo-box.html index a375f61a..4d26d6ce 100644 --- a/src/vaadin-combo-box.html +++ b/src/vaadin-combo-box.html @@ -387,6 +387,13 @@ ready() { super.ready(); + // Disable the internal text-field's validation to prevent it from overriding + // the invalid state that was propagated to the text-field from the combo-box. + this.inputElement.validate = () => {}; + // Restore the internal text-field's invalid state in case + // it got overridden before the validation was disabled above. + this.inputElement.invalid = this.invalid; + this._nativeInput = this.inputElement.focusElement; this._toggleElement = this.$.toggleButton; this._clearElement = this.inputElement.shadowRoot.querySelector('[part="clear-button"]'); diff --git a/test/validation.html b/test/validation.html index 6cbd9bfa..6fd41cfb 100644 --- a/test/validation.html +++ b/test/validation.html @@ -7,6 +7,7 @@ + @@ -15,10 +16,30 @@ + + + + + + +