@aurodesignsystem-dev/auro-formkit 0.0.0-pr1052.9 → 0.0.0-pr1059.0

package/components/combobox/demo/api.md

@@ -1065,8 +1065,8 @@ export function auroMenuLoadingExample() {
 
   }
 
-  combobox.addEventListener("input", (e) => {
-    if (e.target.value && e.target.value !== e.target.optionSelected?.textContent) {
+  combobox.addEventListener("inputValue", (e) => {
+    if (e.target.inputValue && e.target.value !== e.target.inputValue) {
       load();
     }
   });

package/components/combobox/demo/api.min.js

@@ -166,8 +166,8 @@ function auroMenuLoadingExample() {
 
   };
 
-  combobox.addEventListener("input", (e) => {
-    if (e.target.value && e.target.value !== e.target.optionSelected?.textContent) {
+  combobox.addEventListener("inputValue", (e) => {
+    if (e.target.inputValue && e.target.value !== e.target.inputValue) {
       load();
     }
   });
@@ -16654,7 +16654,7 @@ class AuroCombobox extends AuroElement$1 {
     if (this.availableOptions.length === 0) {
       if (this.noMatchOption) {
         this.noMatchOption.removeAttribute('hidden');
-      } else {
+      } else if (!this.menu.loading || this.isHiddenWhileLoading) {
         this.hideBib();
       }
     } else if (this.noMatchOption) {
@@ -16774,7 +16774,6 @@ class AuroCombobox extends AuroElement$1 {
       this.dropdown.hide();
       return;
     }
-
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
       if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
         if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
@@ -16987,10 +16986,6 @@ class AuroCombobox extends AuroElement$1 {
         this.validate();
       }
     });
-
-    this.input.addEventListener('input', () => {
-      this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
-    });
   }
 
   /**
@@ -17050,9 +17045,13 @@ class AuroCombobox extends AuroElement$1 {
     }
 
     // Force dropdown bib to hide if input value has no matching suggestions
-    if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
+    if (this.menu.loading) {
+      this.showBib();
+    } else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
       this.hideBib();
     }
+
+    this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
   }
 
   /**
@@ -17226,7 +17225,7 @@ class AuroCombobox extends AuroElement$1 {
       if (this.value) {
         // If the value got set programmatically make sure we hide the bib
         // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
-        if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
+        if (!this.componentHasFocus) {
           this.hideBib();
         }
       } else {
@@ -17251,7 +17250,8 @@ class AuroCombobox extends AuroElement$1 {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
+      // eslint-disable-next-line no-extra-parens
+      if ((this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading) {
         this.showBib();
       } else {
         this.hideBib();

package/components/combobox/demo/index.min.js

@@ -16502,7 +16502,7 @@ class AuroCombobox extends AuroElement$1 {
     if (this.availableOptions.length === 0) {
       if (this.noMatchOption) {
         this.noMatchOption.removeAttribute('hidden');
-      } else {
+      } else if (!this.menu.loading || this.isHiddenWhileLoading) {
         this.hideBib();
       }
     } else if (this.noMatchOption) {
@@ -16622,7 +16622,6 @@ class AuroCombobox extends AuroElement$1 {
       this.dropdown.hide();
       return;
     }
-
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
       if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
         if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
@@ -16835,10 +16834,6 @@ class AuroCombobox extends AuroElement$1 {
         this.validate();
       }
     });
-
-    this.input.addEventListener('input', () => {
-      this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
-    });
   }
 
   /**
@@ -16898,9 +16893,13 @@ class AuroCombobox extends AuroElement$1 {
     }
 
     // Force dropdown bib to hide if input value has no matching suggestions
-    if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
+    if (this.menu.loading) {
+      this.showBib();
+    } else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
       this.hideBib();
     }
+
+    this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
   }
 
   /**
@@ -17074,7 +17073,7 @@ class AuroCombobox extends AuroElement$1 {
       if (this.value) {
         // If the value got set programmatically make sure we hide the bib
         // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
-        if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
+        if (!this.componentHasFocus) {
           this.hideBib();
         }
       } else {
@@ -17099,7 +17098,8 @@ class AuroCombobox extends AuroElement$1 {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
+      // eslint-disable-next-line no-extra-parens
+      if ((this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading) {
         this.showBib();
       } else {
         this.hideBib();

package/components/combobox/dist/index.js

@@ -16420,7 +16420,7 @@ class AuroCombobox extends AuroElement {
     if (this.availableOptions.length === 0) {
       if (this.noMatchOption) {
         this.noMatchOption.removeAttribute('hidden');
-      } else {
+      } else if (!this.menu.loading || this.isHiddenWhileLoading) {
         this.hideBib();
       }
     } else if (this.noMatchOption) {
@@ -16540,7 +16540,6 @@ class AuroCombobox extends AuroElement {
       this.dropdown.hide();
       return;
     }
-
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
       if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
         if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
@@ -16753,10 +16752,6 @@ class AuroCombobox extends AuroElement {
         this.validate();
       }
     });
-
-    this.input.addEventListener('input', () => {
-      this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
-    });
   }
 
   /**
@@ -16816,9 +16811,13 @@ class AuroCombobox extends AuroElement {
     }
 
     // Force dropdown bib to hide if input value has no matching suggestions
-    if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
+    if (this.menu.loading) {
+      this.showBib();
+    } else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
       this.hideBib();
     }
+
+    this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
   }
 
   /**
@@ -16992,7 +16991,7 @@ class AuroCombobox extends AuroElement {
       if (this.value) {
         // If the value got set programmatically make sure we hide the bib
         // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
-        if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
+        if (!this.componentHasFocus) {
           this.hideBib();
         }
       } else {
@@ -17017,7 +17016,8 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
+      // eslint-disable-next-line no-extra-parens
+      if ((this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading) {
         this.showBib();
       } else {
         this.hideBib();

package/components/combobox/dist/registered.js

@@ -16420,7 +16420,7 @@ class AuroCombobox extends AuroElement {
     if (this.availableOptions.length === 0) {
       if (this.noMatchOption) {
         this.noMatchOption.removeAttribute('hidden');
-      } else {
+      } else if (!this.menu.loading || this.isHiddenWhileLoading) {
         this.hideBib();
       }
     } else if (this.noMatchOption) {
@@ -16540,7 +16540,6 @@ class AuroCombobox extends AuroElement {
       this.dropdown.hide();
       return;
     }
-
     if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
       if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
         if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
@@ -16753,10 +16752,6 @@ class AuroCombobox extends AuroElement {
         this.validate();
       }
     });
-
-    this.input.addEventListener('input', () => {
-      this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
-    });
   }
 
   /**
@@ -16816,9 +16811,13 @@ class AuroCombobox extends AuroElement {
     }
 
     // Force dropdown bib to hide if input value has no matching suggestions
-    if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
+    if (this.menu.loading) {
+      this.showBib();
+    } else if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
       this.hideBib();
     }
+
+    this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue} }));
   }
 
   /**
@@ -16992,7 +16991,7 @@ class AuroCombobox extends AuroElement {
       if (this.value) {
         // If the value got set programmatically make sure we hide the bib
         // when input is not taking the focus (input can be in dropdown.trigger or in bibtemplate)
-        if (!this.contains(document.activeElement) && !this.bibtemplate.contains(document.activeElement)) {
+        if (!this.componentHasFocus) {
           this.hideBib();
         }
       } else {
@@ -17017,7 +17016,8 @@ class AuroCombobox extends AuroElement {
     }
 
     if (changedProperties.has('availableOptions')) {
-      if (this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) {
+      // eslint-disable-next-line no-extra-parens
+      if ((this.availableOptions && this.availableOptions.length > 0 && this.componentHasFocus) || this.menu.loading) {
         this.showBib();
       } else {
         this.hideBib();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr1052.9",
+  "version": "0.0.0-pr1059.0",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {