@lion/ui 0.7.4 → 0.7.5

package/components/form/src/LionForm.js

@@ -10,6 +10,15 @@ const throwFormNodeError = () => {
   );
 };
 
+/**
+ * @param {FormRegistrarHost} formEl
+ * @returns {boolean}
+ */
+function hasFocusableChildren(formEl) {
+  // this implies all children have the same type (either all of them are focusable or none of them are)
+  return formEl.formElements?.some(child => child._focusableNode);
+}
+
 /**
  * LionForm: form wrapper providing extra features and integration with lion-field elements.
  *
@@ -63,7 +72,7 @@ export class LionForm extends LionFieldset {
     this.dispatchEvent(new Event('submit', { bubbles: true }));
 
     if (this.hasFeedbackFor?.includes('error')) {
-      this._setFocusOnFirstErroneousFormElement(this);
+      this._setFocusOnFirstErroneousFormElement(/** @type { * & FormRegistrarHost } */ (this));
     }
   }
 
@@ -95,7 +104,7 @@ export class LionForm extends LionFieldset {
       element.formElements.find(child => child.hasFeedbackFor.includes('error')) ||
       element.formElements[0];
 
-    if (firstFormElWithError.formElements?.length > 0) {
+    if (hasFocusableChildren(firstFormElWithError)) {
       this._setFocusOnFirstErroneousFormElement(firstFormElWithError);
     } else {
       firstFormElWithError._focusableNode.focus();

package/components/form/test/lion-form.test.js

@@ -3,7 +3,8 @@ import '@lion/ui/define/lion-fieldset.js';
 import { LionField, Required } from '@lion/ui/form-core.js';
 import '@lion/ui/define/lion-field.js';
 import '@lion/ui/define/lion-validation-feedback.js';
-
+import '@lion/ui/define/lion-listbox.js';
+import '@lion/ui/define/lion-option.js';
 import '@lion/ui/define/lion-form.js';
 import {
   aTimeout,
@@ -223,7 +224,7 @@ describe('<lion-form>', () => {
     expect(document.activeElement).to.equal(el.formElements[1]._inputNode);
   });
 
-  it('sets focus on submit to the first erroneous form element with a fieldset', async () => {
+  it('sets focus on submit to the first erroneous form element within a fieldset', async () => {
     const el = await fixture(html`
       <lion-form>
         <form>
@@ -266,4 +267,22 @@ describe('<lion-form>', () => {
     // @ts-ignore [allow-protected] in test
     expect(document.activeElement).to.equal(fieldset.formElements[0]._inputNode);
   });
+
+  it('sets focus on submit to the first form element within a erroneous listbox', async () => {
+    const el = await fixture(html`
+      <lion-form>
+        <form>
+          <lion-listbox name="name" .validators="${[new Required()]}">
+            <lion-option value="a">a</lion-option>
+            <lion-option value="b">b</lion-option>
+          </lion-listbox>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    button.click();
+    const listboxEl = el.formElements[0];
+    expect(document.activeElement).to.equal(listboxEl._inputNode);
+  });
 });

package/custom-elements.json

@@ -2100,36 +2100,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "exports/define-helpers/sb-action-logger.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "sb-action-logger",
-          "declaration": {
-            "name": "SbActionLogger",
-            "module": "/exports/helpers.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "exports/define-helpers/sb-locale-switcher.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "sb-locale-switcher",
-          "declaration": {
-            "name": "SbLocaleSwitcher",
-            "module": "/exports/helpers.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "exports/define/lion-accordion.js",
@@ -2820,6 +2790,36 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "exports/define-helpers/sb-action-logger.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "sb-action-logger",
+          "declaration": {
+            "name": "SbActionLogger",
+            "module": "/exports/helpers.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "exports/define-helpers/sb-locale-switcher.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "sb-locale-switcher",
+          "declaration": {
+            "name": "SbLocaleSwitcher",
+            "module": "/exports/helpers.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/accordion/src/LionAccordion.js",

package/dist-types/components/form/src/LionForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LionForm.d.ts","sourceRoot":"","sources":["../../../../components/form/src/LionForm.js"],"names":[],"mappings":"AAYA;;;;GAIG;AAEH;IAoCE;;;OAGG;IACH,sBAHW,KAAK,QAYf;IAUD;;;OAGG;IACH,qBAHW,KAAK,QAQf;IA3DD,0BAMC;IAOD,iCAEC;IAED,eAQC;IAiBD,cAMC;IAaD;;;OAGG;IACH,wDAHW,iBAAiB,QAa3B;IAED,eAAe;IACf,oCAGC;IAED,eAAe;IACf,oCAGC;CACF;gCAhHY,OAAO,+DAA+D,EAAE,iBAAiB"}
+{"version":3,"file":"LionForm.d.ts","sourceRoot":"","sources":["../../../../components/form/src/LionForm.js"],"names":[],"mappings":"AAqBA;;;;GAIG;AAEH;IAoCE;;;OAGG;IACH,sBAHW,KAAK,QAYf;IAUD;;;OAGG;IACH,qBAHW,KAAK,QAQf;IA3DD,0BAMC;IAOD,iCAEC;IAED,eAQC;IAiBD,cAMC;IAaD;;;OAGG;IACH,wDAHW,iBAAiB,QAa3B;IAED,eAAe;IACf,oCAGC;IAED,eAAe;IACf,oCAGC;CACF;gCAzHY,OAAO,+DAA+D,EAAE,iBAAiB"}

package/dist-types/components/form/test/lion-form.test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lion-form.test.d.ts","sourceRoot":"","sources":["../../../../components/form/test/lion-form.test.js"],"names":[],"mappings":"uBAmBa,OAAO,oBAAoB,EAAE,QAAQ;6BACrC,OAAO,KAAK,EAAE,cAAc"}
+{"version":3,"file":"lion-form.test.d.ts","sourceRoot":"","sources":["../../../../components/form/test/lion-form.test.js"],"names":[],"mappings":"uBAoBa,OAAO,oBAAoB,EAAE,QAAQ;6BACrC,OAAO,KAAK,EAAE,cAAc"}