@aurodesignsystem-dev/auro-formkit 0.0.0-pr783.1 → 0.0.0-pr784.0

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

@@ -1042,13 +1042,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

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

@@ -1034,13 +1034,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

package/components/checkbox/dist/index.js

@@ -987,13 +987,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

package/components/checkbox/dist/registered.js

@@ -987,13 +987,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';

package/components/combobox/demo/api.md

@@ -39,6 +39,7 @@
 
 | Method     | Type                                   | Description                                      |
 |------------|----------------------------------------|--------------------------------------------------|
+| [clear](#clear)    | `(): void`                             | Clears the current value of the combobox.        |
 | [focus](#focus)    | `(): void`                             | Focuses the combobox trigger input.              |
 | [isValid](#isValid)  | `(): boolean`                          | Checks if the element is valid.                  |
 | [reset](#reset)    | `(): void`                             | Resets component to initial state.               |

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

@@ -954,13 +954,24 @@ let AuroFormValidation$1 = class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -2788,7 +2799,7 @@ class AuroFloatingUI {
    */
   mirrorSize() {
     // mirror the boxsize from bibSizer
-    if (this.element.bibSizer && this.element.matchWidth) {
+    if (this.element.bibSizer) {
       const sizerStyle = window.getComputedStyle(this.element.bibSizer);
       const bibContent = this.element.bib.shadowRoot.querySelector(".container");
       if (sizerStyle.width !== '0px') {
@@ -3000,13 +3011,13 @@ class AuroFloatingUI {
     if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
       return;
     }
-
+    
     // if fullscreen bib is in fullscreen mode, do not close
     if (this.element.bib.hasAttribute('isfullscreen')) {
       return;
     }
 
-    this.hideBib("keydown");
+    this.hideBib();
   }
 
   setupHideHandlers() {
@@ -3031,7 +3042,7 @@ class AuroFloatingUI {
           document.expandedAuroFormkitDropdown = null;
           document.expandedAuroFloater = this;
         } else {
-          this.hideBib("click");
+          this.hideBib();
         }
       }
     };
@@ -3044,7 +3055,7 @@ class AuroFloatingUI {
           // if something else is open, let it handle itself
           return;
         }
-        this.hideBib("keydown");
+        this.hideBib();
       }
     };
 
@@ -3127,11 +3138,7 @@ class AuroFloatingUI {
     }
   }
 
-  /**
-   * Hides the floating UI element.
-   * @param {String} eventType - The event type that triggered the hiding action.
-   */
-  hideBib(eventType = "unknown") {
+  hideBib() {
     if (!this.element.disabled && !this.element.noToggle) {
       this.lockScroll(false);
       this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3142,7 +3149,7 @@ class AuroFloatingUI {
       if (this.showing) {
         this.cleanupHideHandlers();
         this.showing = false;
-        this.dispatchEventDropdownToggle(eventType);
+        this.dispatchEventDropdownToggle();
       }
     }
     document.expandedAuroFloater = null;
@@ -3151,13 +3158,11 @@ class AuroFloatingUI {
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
-   * @param {String} eventType - The event type that triggered the toggle action.
    */
-  dispatchEventDropdownToggle(eventType) {
+  dispatchEventDropdownToggle() {
     const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
       detail: {
         expanded: this.showing,
-        eventType: eventType || "unknown",
       },
       composed: true
     });
@@ -3167,7 +3172,7 @@ class AuroFloatingUI {
 
   handleClick() {
     if (this.element.isPopoverVisible) {
-      this.hideBib("click");
+      this.hideBib();
     } else {
       this.showBib();
     }
@@ -3194,7 +3199,7 @@ class AuroFloatingUI {
 
             event.preventDefault();
             this.handleClick();
-          }
+          } 
           break;
         case 'mouseenter':
           if (this.element.hoverToggle) {
@@ -3203,7 +3208,7 @@ class AuroFloatingUI {
           break;
         case 'mouseleave':
           if (this.element.hoverToggle) {
-            this.hideBib("mouseleave");
+            this.hideBib();
           }
           break;
         case 'focus':
@@ -4591,9 +4596,6 @@ class AuroDropdown extends AuroElement$4 {
 
     this.parentBorder = false;
 
-    /** @private */
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-
     this.privateDefaults();
   }
 
@@ -5027,19 +5029,12 @@ class AuroDropdown extends AuroElement$4 {
     if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
       this.handleTriggerContentSlotChange();
     }
-  }
 
-  /**
-   * Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.
-   * @private
-   * @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
-   */
-  handleDropdownToggle(event) {
-    this.updateFocusTrap();
-    this.isPopoverVisible = event.detail.expanded;
-    const eventType = event.detail.eventType || "unknown";
-    if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
-      this.trigger.focus();
+    if (changedProperties.has('isPopoverVisible')) {
+      this.updateFocusTrap();
+      if (!this.isPopoverVisible && this.hasFocus) {
+        this.trigger.focus();
+      }
     }
   }
 
@@ -5047,7 +5042,6 @@ class AuroDropdown extends AuroElement$4 {
 
     // Configure the floater to, this will generate the ID for the bib
     this.floater.configure(this, 'auroDropdown');
-    this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
 
     /**
      * @description Let subscribers know that the dropdown ID ha been generated and added.
@@ -10207,13 +10201,24 @@ class AuroFormValidation {
     this.getInputElements(elem);
     this.getAuroInputs(elem);
 
-    // Validate only if noValidate is not true and the input does not have focus
+    // Check if validation should run
     let validationShouldRun =
+
+      // If the validation was forced
       force ||
-      (!elem.contains(document.activeElement) &&
-        (elem.touched ||
-          (!elem.touched && typeof elem.value !== "undefined"))) ||
-      elem.validateOnInput;
+
+      // If the validation should run on input
+      elem.validateOnInput ||
+
+      // State-based checks
+      (
+        // Element is not currently focused
+        !elem.contains(document.activeElement) && // native input is not focused directly
+        !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
+
+        // And element has been touched or is untouched but has a value
+        ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
+      );
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
@@ -11164,9 +11169,9 @@ class BaseInput extends AuroElement$2$1 {
     this.inputElement.value = "";
     this.value = "";
     this.labelElement.classList.remove('inputElement-label--sticky');
+    this.notifyValueChanged();
     this.focus();
     this.validation.validate(this);
-    this.notifyValueChanged();
   }
 
   /**
@@ -11261,13 +11266,20 @@ class BaseInput extends AuroElement$2$1 {
   }
 
   /**
-   * Resets component to initial state.
+   * Resets component to initial state, including resetting the touched state and validity.
    * @returns {void}
    */
   reset() {
     this.validation.reset(this);
   }
 
+  /**
+   * Clears the input value
+   */
+  clear() {
+    this.value = undefined;
+  }
+
   /**
    * Sets configuration data used elsewhere based on the `type` attribute.
    * @private
@@ -16611,7 +16623,7 @@ class AuroCombobox extends AuroElement$1 {
     });
 
     this.menu.addEventListener('auroMenu-selectValueReset', () => {
-      this.reset();
+      this.clear();
     });
   }
 
@@ -16631,7 +16643,7 @@ class AuroCombobox extends AuroElement$1 {
     });
 
     /**
-     * Validate every time we remove focus from the datepicker.
+     * Validate every time we remove focus from the combo box.
      */
     this.addEventListener('focusout', () => {
       if (document.activeElement !== this) {
@@ -16836,7 +16848,16 @@ class AuroCombobox extends AuroElement$1 {
    */
   reset() {
     this.input.reset();
+    this.menu.value = undefined;
     this.validation.reset(this);
+  }
+
+  /**
+   * Clears the current value of the combobox.
+   * @returns {void}
+   */
+  clear() {
+    this.input.clear();
     this.menu.value = undefined;
   }
 
@@ -16862,7 +16883,7 @@ class AuroCombobox extends AuroElement$1 {
           this.hideBib();
         }
       } else {
-        this.reset();
+        this.clear();
       }
     }