fix(validity): validate when auro-select loses focus

AlaskaAirlines · Dec 16, 2022 · ac77c63 · ac77c63
1 parent beefb56
commit ac77c63
Showing 1 changed file with 18 additions and 16 deletions.
diff --git a/src/auro-select.js b/src/auro-select.js
@@ -145,22 +145,24 @@ class AuroSelect extends LitElement {
    */
   validate() {
     // Validate only if noValidate is not true and the input does not have focus
-    if (this.hasAttribute('error')) {
-      this.validity = 'customError';
-      this.setCustomValidity = this.error;
-    } else if (this.value !== undefined && !this.noValidate) {
-      this.validity = 'valid';
-      this.setCustomValidity = '';
-
-      /**
-       * Only validate once we interact with the datepicker
-       * this.value === undefined is the initial state pre-interaction.
-       *
-       * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
-       */
-      if ((!this.value || this.value.length === 0) && this.required) {
-        this.validity = 'valueMissing';
-        this.setCustomValidity = this.setCustomValidityValueMissing;
+    if (!this.contains(document.activeElement)) {
+      if (this.hasAttribute('error')) {
+        this.validity = 'customError';
+        this.setCustomValidity = this.error;
+      } else if (this.value !== undefined && !this.noValidate) {
+        this.validity = 'valid';
+        this.setCustomValidity = '';
+
+        /**
+         * Only validate once we interact with the datepicker
+         * this.value === undefined is the initial state pre-interaction.
+         *
+         * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState.
+         */
+        if ((!this.value || this.value.length === 0) && this.required) {
+          this.validity = 'valueMissing';
+          this.setCustomValidity = this.setCustomValidityValueMissing;
+        }
       }
     }