Merge pull request #587 from centrica-engineering/hotfix/element-trav…

…erse fix: switch to loop
centrica-engineering · Feb 6, 2024 · ef27aa3 · ef27aa3
2 parents d24115c + 4f2fadb
commit ef27aa3
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 7 deletions.
diff --git a/packages/muon/components/form/src/form-component.js b/packages/muon/components/form/src/form-component.js
@@ -139,16 +139,22 @@ export class Form extends MuonElement {
       this.querySelector('*:not([hidden])[type="reset"]');
   }
 
+  // TODO: Decide a better way to find the input element
   _findInputElement(element) {
-    if (element.parentElement._inputElement) {
-      return element.parentElement;
-    }
-    // Due to any layout container elements - @TODO - need better logic
-    if (element.parentElement.parentElement._inputElement) {
-      return element.parentElement.parentElement;
+    const limit = 10;
+    let count = 0;
+    let parentElement = element.parentElement;
+
+    while (parentElement && !parentElement?._inputElement) {
+      parentElement = parentElement.parentElement;
+      count += 1;
+
+      if (count >= limit) {
+        break;
+      }
     }
 
-    return element;
+    return parentElement?._inputElement ? parentElement : element;
   }
 
   validate() {

diff --git a/packages/muon/tests/components/form/__snapshots__/form.test.snap.js b/packages/muon/tests/components/form/__snapshots__/form.test.snap.js
@@ -113,3 +113,9 @@ snapshots["form form cta reset with inputter"] =
 `;
 /* end snapshot form form cta reset with inputter */
 
+snapshots["form form input is too nested"] = 
+`<slot>
+</slot>
+`;
+/* end snapshot form form input is too nested */
+
diff --git a/packages/muon/tests/components/form/form.test.js b/packages/muon/tests/components/form/form.test.js
@@ -336,4 +336,26 @@ describe('form', () => {
     resetBtn.click();
     expect(input.value).to.equal('test', 'no reset input value');
   });
+
+  it('form input is too nested', async () => {
+    const el = await fixture(html`
+      <${tag}>
+        <form>
+            <${inputterTag} validation='["isRequired"]' value='test'>
+              <div><div><div><div><div><div><div><div><div><div><div><div>
+                <label slot="label" for="foo">Bar</label>
+                <input id="foo" type="text" />
+              </div></div></div></div></div></div></div></div></div></div></div></div>
+            </${inputterTag}>
+            <${ctaTag} type="submit">Submit</${ctaTag}>
+        </form>
+      </${tag}>
+    `);
+    await defaultChecks(el);
+
+    expect(el._elements).to.have.lengthOf(2);
+    expect(el._elements[0].nodeName).to.equal('INPUT');
+
+    expect(el._findInputElement(el._elements[0])).to.equal(el._elements[0]);
+  });
 });