@aurodesignsystem/auro-formkit 3.3.0-beta.2 → 3.4.0

package/components/combobox/dist/index.js

@@ -541,6 +541,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -678,7 +679,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -748,11 +749,17 @@ let AuroFormValidation$1 = class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -773,7 +780,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -784,7 +791,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -863,7 +870,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 };
@@ -9064,6 +9071,7 @@ class AuroFormValidation {
   reset(elem) {
     elem.validity = undefined;
     elem.value = undefined;
+    elem.touched = false;
 
     // Resets the second value of the datepicker in range state
     if (elem.valueEnd) {
@@ -9201,7 +9209,7 @@ class AuroFormValidation {
       } else if (elem.type === 'date' && elem.value?.length > 0) {
 
         // Guard Clause: if the value is too short
-        if (elem.value.length < elem.lengthForType) {
+        if (elem.value?.length < elem.lengthForType) {
           
           elem.validity = 'tooShort';
           elem.errorMessage = elem.setCustomValidityForType || elem.setCustomValidity || '';
@@ -9271,11 +9279,17 @@ class AuroFormValidation {
     this.getAuroInputs(elem);
 
     // Validate only if noValidate is not true and the input does not have focus
-    const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput;
+    let validationShouldRun =
+      force ||
+      (!elem.contains(document.activeElement) &&
+        (elem.touched ||
+          (!elem.touched && typeof elem.value !== "undefined"))) ||
+      elem.validateOnInput;
 
     if (elem.hasAttribute('error')) {
       elem.validity = 'customError';
       elem.errorMessage = elem.setCustomValidityCustomError || elem.error || elem.setCustomValidity || '';
+      validationShouldRun = false;
     } else if (validationShouldRun) {
       elem.validity = 'valid';
       elem.errorMessage = '';
@@ -9296,7 +9310,7 @@ class AuroFormValidation {
         }
       }
 
-      if (!hasValue && elem.required) {
+      if (!hasValue && elem.required && elem.touched) {
         elem.validity = 'valueMissing';
         elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
       } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
@@ -9307,7 +9321,7 @@ class AuroFormValidation {
       }
     }
 
-    if (this.auroInputElements?.length > 0) {
+    if (this.auroInputElements?.length > 0 && elem.validity !== "valueMissing") {
       elem.validity = this.auroInputElements[0].validity;
       elem.errorMessage = this.auroInputElements[0].errorMessage;
 
@@ -9386,7 +9400,7 @@ class AuroFormValidation {
         }
       }
     } else {
-      elem.errorMessage = undefined;
+      elem.errorMessage = '';
     }
   }
 }
@@ -9437,6 +9451,7 @@ class BaseInput extends LitElement {
    * @returns {void}
    */
   privateDefaults() {
+    this.touched = false;
     this.util = new AuroInputUtilities();
     this.validation = new AuroFormValidation();
     this.inputIconName = undefined;
@@ -9597,6 +9612,13 @@ class BaseInput extends LitElement {
         type: String
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * Defines the language of an element.
        */
@@ -9798,6 +9820,18 @@ class BaseInput extends LitElement {
       validity: {
         type: String,
         reflect: true
+      },
+
+      /**
+       * Indicates whether the input is in a dirty state (has been interacted with).
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      touched: {
+        type: Boolean,
+        reflect: true,
+        attribute: false
       }
     };
   }
@@ -10084,15 +10118,7 @@ class BaseInput extends LitElement {
    */
   handleFocusin() {
 
-    /**
-     * The input is considered to be in it's initial state based on
-     * if this.value === undefined. The first time we interact with the
-     * input manually, by applying focusin, we need to flag the
-     * input as no longer in the initial state.
-     */
-    if (this.value === undefined) {
-      this.value = '';
-    }
+    this.touched = true;
   }
 
   /**
@@ -10158,9 +10184,9 @@ class BaseInput extends LitElement {
 
     if (this.type in defaultLengths) {
       this.lengthForType = this.format ? this.format.length : defaultLengths[this.type];
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     } else if (this.type === 'number') {
-      this.inputMode = 'numeric';
+      this.inputmode = this.inputmode || 'numeric';
     }
 
     if (this.type === "date" && !this.format) {
@@ -11518,7 +11544,7 @@ class AuroInput extends BaseInput {
             pattern="${ifDefined(this.definePattern())}"
             maxlength="${ifDefined(this.maxLength ? this.maxLength : undefined)}"
             minlength="${ifDefined(this.minLength ? this.minLength : undefined)}"
-            inputMode="${ifDefined(this.inputMode ? this.inputMode : undefined)}"
+            inputMode="${ifDefined(this.inputmode ? this.inputmode : undefined)}"
             ?required="${this.required}"
             ?disabled="${this.disabled}"
             aria-describedby="${this.uniqueId}"
@@ -12577,6 +12603,13 @@ class AuroCombobox extends LitElement {
         reflect: true
       },
 
+      /** Exposes inputmode attribute for input.  */
+      inputmode: {
+        type: String,
+        attribute: true,
+        reflect: true
+      },
+
       /**
        * If set, combobox will not filter menuoptions based in input.
        */
@@ -12726,14 +12759,6 @@ class AuroCombobox extends LitElement {
         reflect: true
       },
 
-      /**
-       * @private
-       */
-      isDropdownFullscreen: {
-        type: Boolean,
-        reflect: false
-      },
-
       /**
        * @private
        * specifies the currently active option
@@ -12768,6 +12793,14 @@ class AuroCombobox extends LitElement {
    * @returns {void}
    */
   handleMenuOptions() {
+    // Reset menu matchword UI
+    this.menu.updateItemsState(new Map([
+      [
+        'matchWord',
+        true
+      ]
+    ]));
+
     this.generateOptionsArray();
     this.availableOptions = [];
 
@@ -12875,8 +12908,6 @@ class AuroCombobox extends LitElement {
       return;
     }
 
-    this.isDropdownFullscreen = this.dropdown.isBibFullscreen;
-
     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) {
@@ -12903,6 +12934,13 @@ class AuroCombobox extends LitElement {
     // Listen for the dropdown to be shown or hidden
     this.dropdown.addEventListener("auroDropdown-toggled", (ev) => {
       this.dropdownOpen = ev.detail.expanded;
+
+      // wait a frame in case the bib gets hide immediately after showing because there is no value
+      setTimeout(this.transportInput);
+    });
+
+    this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
+      this.showBib();
     });
 
     // this.dropdown.addEventListener('auroDropdown-show', () => {
@@ -12921,19 +12959,10 @@ class AuroCombobox extends LitElement {
     this.hideBib = this.hideBib.bind(this);
     this.bibtemplate.addEventListener('close-click', this.hideBib);
 
-    this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
-      this.showBib();
-    });
-
     this.transportInput = this.transportInput.bind(this);
-    this.dropdown.addEventListener('auroDropdown-toggled', () => {
-      // wait a frame in case the bib gets hide immediately after showing because there is no value
-      setTimeout(this.transportInput);
-    });
 
-    this.dropdown.addEventListener('auroDropdown-strategy-change', (event) => {
+    this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
       // event when the strategy(bib mode) is changed between fullscreen and floating
-      this.isDropdownFullscreen = event.detail.strategy === 'fullscreen';
       setTimeout(this.transportInput);
     });
   }
@@ -13029,20 +13058,17 @@ class AuroCombobox extends LitElement {
    * @private
    * Dispatches input's keyboard events from host
    * This allows key events from the input to be handled by the parent.
-   * @param {KeyboardEvent} event - The keyboard event.
+   * @param {Event} event - The keyboard event.
    */
-  bubbleUpInputKeyEvent(event) {
+  bubbleUpInputEvent(event) {
+    // Do not need to bubble events if the input is not in bib.
     if (event.currentTarget.parentNode !== this.dropdown) {
+      // prevents browsers to move cursor in input element.
       if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         event.preventDefault();
       }
-
-      const ke = new KeyboardEvent(event.type, {
-        key: event.key,
-        code: event.code,
-        repeat: event.repeat,
-      });
-      this.dispatchEvent(ke);
+      const dupEvent = new event.constructor(event.type, event);
+      this.dispatchEvent(dupEvent);
     }
   }
 
@@ -13053,14 +13079,22 @@ class AuroCombobox extends LitElement {
    */
   configureInput() {
     // When input is in bibtemplate, make the event to be fired at combobox element
-    this.bubbleUpInputKeyEvent = this.bubbleUpInputKeyEvent.bind(this);
-    this.input.addEventListener('keydown', this.bubbleUpInputKeyEvent);
-    this.input.addEventListener('keyup', this.bubbleUpInputKeyEvent);
-    this.input.addEventListener('input', this.bubbleUpInputKeyEvent);
+    this.bubbleUpInputEvent = this.bubbleUpInputEvent.bind(this);
+
+    const events = [
+      'input',
+      'keydown',
+      'keyup'
+    ];
+    events.forEach((eventType) => {
+      this.input.addEventListener(eventType, this.bubbleUpInputEvent);
+    });
 
     this.addEventListener('keyup', (evt) => {
       if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') {
-        this.showBib();
+        if (!this.dropdown.isPopoverVisible) {
+          this.showBib();
+        }
       }
     });
 
@@ -13121,8 +13155,8 @@ class AuroCombobox extends LitElement {
     const inputHelpText = this.input.shadowRoot.querySelector('auro-helptext, [auro-helptext');
     const inputAlertIcon = this.input.shadowRoot.querySelector(".alertNotification");
 
-    if (this.dropdown.isPopoverVisible && this.isDropdownFullscreen) {
-      if (this.input.parentNode !== this.bibtemplate) {
+    if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
+      if (this.input.parentNode === this.dropdown) {
         // keep the trigger size the same even after input gets removed
         const parentSize = window.getComputedStyle(this.dropdown.trigger);
         this.dropdown.trigger.style.height = parentSize.height;
@@ -13208,7 +13242,7 @@ class AuroCombobox extends LitElement {
     }
 
     // Force dropdown bib to hide if input value has no matching suggestions
-    if ((!this.availableOptions || this.availableOptions.length === 0) && !this.isDropdownFullscreen) {
+    if ((!this.availableOptions || this.availableOptions.length === 0) && !this.dropdown.isBibFullscreen) {
       this.hideBib();
     }
   }
@@ -13231,7 +13265,7 @@ class AuroCombobox extends LitElement {
       if (evt.key === 'Tab') {
         this.hideBib();
 
-        if (this.dropdown.isPopoverVisible && this.isDropdownFullscreen) {
+        if (this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
           // if bib is open in fullscreen, just close the bib and do not move the focus to the next focasable element
           evt.preventDefault();
         }
@@ -13456,6 +13490,7 @@ class AuroCombobox extends LitElement {
             setCustomValidityCustomError="${this.setCustomValidityCustomError}"
             .autocomplete="${this.autocomplete}"
             .type="${this.type}"
+            inputmode="${ifDefined(this.inputmode)}"
             @input="${this.handleInputValueChange}">
           </${this.inputTag}>