@aurodesignsystem-dev/auro-formkit 0.0.0-pr1098.1 → 0.0.0-pr1098.3

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

@@ -16891,6 +16891,29 @@ class AuroCombobox extends AuroElement$1 {
     }
   }
 
+  /**
+   * Forces focus to the internal input element and positions the cursor at the end of the text.
+   * This is used when clicking anywhere within the Combobox to ensure the input receives focus
+   * and the cursor is positioned at the end for better user experience.
+   * @private
+   * @returns {void}
+   */
+  forceFocusToInputEnd() {
+    // Set up input ref
+    let inputElement = null;
+
+    if (this.input.shadowRoot) {
+      inputElement = this.input.shadowRoot.querySelector('input');
+    }
+
+    if (inputElement) {
+      // Force focus and set cursor position to end of text to ensure visibility
+      inputElement.focus();
+      const textLength = inputElement.value ? inputElement.value.length : 0;
+      inputElement.setSelectionRange(textLength, textLength);
+    }
+  }
+
   /**
    * Binds all behavior needed to the dropdown after rendering.
    * @private
@@ -16919,6 +16942,9 @@ class AuroCombobox extends AuroElement$1 {
 
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
       this.showBib();
+
+      // Fixes Chromium-specific issue where clicking outside input but within Combobox doesn't return focus
+      this.forceFocusToInputEnd();
     });
 
     // setting up bibtemplate

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

@@ -16693,6 +16693,29 @@ class AuroCombobox extends AuroElement$1 {
     }
   }
 
+  /**
+   * Forces focus to the internal input element and positions the cursor at the end of the text.
+   * This is used when clicking anywhere within the Combobox to ensure the input receives focus
+   * and the cursor is positioned at the end for better user experience.
+   * @private
+   * @returns {void}
+   */
+  forceFocusToInputEnd() {
+    // Set up input ref
+    let inputElement = null;
+
+    if (this.input.shadowRoot) {
+      inputElement = this.input.shadowRoot.querySelector('input');
+    }
+
+    if (inputElement) {
+      // Force focus and set cursor position to end of text to ensure visibility
+      inputElement.focus();
+      const textLength = inputElement.value ? inputElement.value.length : 0;
+      inputElement.setSelectionRange(textLength, textLength);
+    }
+  }
+
   /**
    * Binds all behavior needed to the dropdown after rendering.
    * @private
@@ -16721,6 +16744,9 @@ class AuroCombobox extends AuroElement$1 {
 
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
       this.showBib();
+
+      // Fixes Chromium-specific issue where clicking outside input but within Combobox doesn't return focus
+      this.forceFocusToInputEnd();
     });
 
     // setting up bibtemplate

package/components/combobox/dist/auro-combobox.d.ts

@@ -376,6 +376,14 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     showBib(): void;
+    /**
+     * Forces focus to the internal input element and positions the cursor at the end of the text.
+     * This is used when clicking anywhere within the Combobox to ensure the input receives focus
+     * and the cursor is positioned at the end for better user experience.
+     * @private
+     * @returns {void}
+     */
+    private forceFocusToInputEnd;
     /**
      * Binds all behavior needed to the dropdown after rendering.
      * @private

package/components/combobox/dist/index.js

@@ -16600,6 +16600,29 @@ class AuroCombobox extends AuroElement {
     }
   }
 
+  /**
+   * Forces focus to the internal input element and positions the cursor at the end of the text.
+   * This is used when clicking anywhere within the Combobox to ensure the input receives focus
+   * and the cursor is positioned at the end for better user experience.
+   * @private
+   * @returns {void}
+   */
+  forceFocusToInputEnd() {
+    // Set up input ref
+    let inputElement = null;
+
+    if (this.input.shadowRoot) {
+      inputElement = this.input.shadowRoot.querySelector('input');
+    }
+
+    if (inputElement) {
+      // Force focus and set cursor position to end of text to ensure visibility
+      inputElement.focus();
+      const textLength = inputElement.value ? inputElement.value.length : 0;
+      inputElement.setSelectionRange(textLength, textLength);
+    }
+  }
+
   /**
    * Binds all behavior needed to the dropdown after rendering.
    * @private
@@ -16628,6 +16651,9 @@ class AuroCombobox extends AuroElement {
 
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
       this.showBib();
+
+      // Fixes Chromium-specific issue where clicking outside input but within Combobox doesn't return focus
+      this.forceFocusToInputEnd();
     });
 
     // setting up bibtemplate

package/components/combobox/dist/registered.js

@@ -16600,6 +16600,29 @@ class AuroCombobox extends AuroElement {
     }
   }
 
+  /**
+   * Forces focus to the internal input element and positions the cursor at the end of the text.
+   * This is used when clicking anywhere within the Combobox to ensure the input receives focus
+   * and the cursor is positioned at the end for better user experience.
+   * @private
+   * @returns {void}
+   */
+  forceFocusToInputEnd() {
+    // Set up input ref
+    let inputElement = null;
+
+    if (this.input.shadowRoot) {
+      inputElement = this.input.shadowRoot.querySelector('input');
+    }
+
+    if (inputElement) {
+      // Force focus and set cursor position to end of text to ensure visibility
+      inputElement.focus();
+      const textLength = inputElement.value ? inputElement.value.length : 0;
+      inputElement.setSelectionRange(textLength, textLength);
+    }
+  }
+
   /**
    * Binds all behavior needed to the dropdown after rendering.
    * @private
@@ -16628,6 +16651,9 @@ class AuroCombobox extends AuroElement {
 
     this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
       this.showBib();
+
+      // Fixes Chromium-specific issue where clicking outside input but within Combobox doesn't return focus
+      this.forceFocusToInputEnd();
     });
 
     // setting up bibtemplate

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

@@ -337,10 +337,6 @@ class AuroRadio extends i$2 {
   }
 
   updated(changedProperties) {
-    if (changedProperties.has('error') || changedProperties.has('validity')) {
-      this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
-    }
-
     if (changedProperties.has('required')) {
       this.setAttribute('aria-required', this.isRequired(this.required));
     }
@@ -1713,10 +1709,14 @@ class AuroRadioGroup extends i$2 {
 
     if (changedProperties.has('validity')) {
       if (this.validity && this.validity !== 'valid') {
+        this.setAttribute('aria-invalid', 'true');
+
         this.items.forEach((el) => {
           el.setAttribute('error', true);
         });
       } else {
+        this.removeAttribute('aria-invalid');
+
         this.items.forEach((el) => {
           el.removeAttribute('error');
         });

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

@@ -312,10 +312,6 @@ class AuroRadio extends i$2 {
   }
 
   updated(changedProperties) {
-    if (changedProperties.has('error') || changedProperties.has('validity')) {
-      this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
-    }
-
     if (changedProperties.has('required')) {
       this.setAttribute('aria-required', this.isRequired(this.required));
     }
@@ -1688,10 +1684,14 @@ class AuroRadioGroup extends i$2 {
 
     if (changedProperties.has('validity')) {
       if (this.validity && this.validity !== 'valid') {
+        this.setAttribute('aria-invalid', 'true');
+
         this.items.forEach((el) => {
           el.setAttribute('error', true);
         });
       } else {
+        this.removeAttribute('aria-invalid');
+
         this.items.forEach((el) => {
           el.removeAttribute('error');
         });

package/components/radio/dist/index.js

@@ -272,10 +272,6 @@ class AuroRadio extends LitElement {
   }
 
   updated(changedProperties) {
-    if (changedProperties.has('error') || changedProperties.has('validity')) {
-      this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
-    }
-
     if (changedProperties.has('required')) {
       this.setAttribute('aria-required', this.isRequired(this.required));
     }
@@ -1641,10 +1637,14 @@ class AuroRadioGroup extends LitElement {
 
     if (changedProperties.has('validity')) {
       if (this.validity && this.validity !== 'valid') {
+        this.setAttribute('aria-invalid', 'true');
+
         this.items.forEach((el) => {
           el.setAttribute('error', true);
         });
       } else {
+        this.removeAttribute('aria-invalid');
+
         this.items.forEach((el) => {
           el.removeAttribute('error');
         });

package/components/radio/dist/registered.js

@@ -272,10 +272,6 @@ class AuroRadio extends LitElement {
   }
 
   updated(changedProperties) {
-    if (changedProperties.has('error') || changedProperties.has('validity')) {
-      this.setAttribute('aria-invalid', this.error || this.validity !== 'valid' ? 'true' : 'false');
-    }
-
     if (changedProperties.has('required')) {
       this.setAttribute('aria-required', this.isRequired(this.required));
     }
@@ -1641,10 +1637,14 @@ class AuroRadioGroup extends LitElement {
 
     if (changedProperties.has('validity')) {
       if (this.validity && this.validity !== 'valid') {
+        this.setAttribute('aria-invalid', 'true');
+
         this.items.forEach((el) => {
           el.setAttribute('error', true);
         });
       } else {
+        this.removeAttribute('aria-invalid');
+
         this.items.forEach((el) => {
           el.removeAttribute('error');
         });

package/package.json

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