fix(ld-input): hidden input

emdgroup-liquid · Dec 2, 2021 · 690e495 · 690e495
1 parent 5f7026b
commit 690e495
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx
@@ -128,8 +128,7 @@ export class LdInput implements InnerFocusable {
   updateHiddenInput() {
     const outerForm = this.el.closest('form')
     if (!this.hiddenInput && this.name && (outerForm || this.form)) {
-      this.hiddenInput = document.createElement('input')
-      this.el.appendChild(this.hiddenInput)
+      this.createHiddenInput()
     }
 
     if (this.hiddenInput) {
@@ -164,30 +163,33 @@ export class LdInput implements InnerFocusable {
     }
   }
 
+  private createHiddenInput() {
+    this.hiddenInput = document.createElement('input')
+    this.hiddenInput.type = 'hidden'
+    this.el.appendChild(this.hiddenInput)
+  }
+
   componentWillLoad() {
     const outerForm = this.el.closest('form')
 
     if (outerForm && !this.autocomplete) {
       this.autocomplete = outerForm.getAttribute('autocomplete')
     }
 
-    if (outerForm || this.form) {
-      if (this.name) {
-        this.hiddenInput = document.createElement('input')
-        this.hiddenInput.dirName = this.dirname
-        this.hiddenInput.type = 'hidden'
-        this.hiddenInput.name = this.name
-
-        if (this.form) {
-          this.hiddenInput.setAttribute('form', this.form)
-        }
+    if (this.name && (outerForm || this.form)) {
+      this.createHiddenInput()
+      this.hiddenInput.dirName = this.dirname
+      this.hiddenInput.name = this.name
 
-        if (this.value) {
-          this.hiddenInput.value = this.value
-        }
+      if (this.form) {
+        this.hiddenInput.setAttribute('form', this.form)
+      }
 
-        this.el.appendChild(this.hiddenInput)
+      if (this.value) {
+        this.hiddenInput.value = this.value
       }
+
+      this.el.appendChild(this.hiddenInput)
     }
 
     this.el.querySelectorAll('ld-button').forEach((button) => {

diff --git a/src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap b/src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap
@@ -18,7 +18,7 @@ exports[`ld-input creates hidden input field, if form attribute is added 1`] = `
     <input form="test" name="example" part="input focusable">
     <slot name="end"></slot>
   </mock:shadow-root>
-  <input form="test" name="example">
+  <input form="test" name="example" type="hidden">
 </ld-input>
 `;
 
@@ -51,7 +51,7 @@ exports[`ld-input creates hidden input field, if name attribute is added 1`] = `
     <input name="test" part="input focusable">
     <slot name="end"></slot>
   </mock:shadow-root>
-  <input name="test">
+  <input name="test" type="hidden">
 </ld-input>
 `;