fix(ld-input): submit associated form on return

emdgroup-liquid · Dec 15, 2021 · f74d88c · f74d88c
1 parent 99f6494
commit f74d88c
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 3 deletions.
diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx
@@ -303,11 +303,18 @@ export class LdInput implements InnerFocusable, ClonesAttributes {
   }
 
   private handleKeyDown = (ev: KeyboardEvent) => {
+    const outerForm = this.el.closest('form')
+    const formToSubmit = this.form
+      ? document.querySelector<HTMLFormElement>(`#${this.form}`) ?? outerForm
+      : outerForm
+
     if (
       this.el.getAttribute('aria-disabled') === 'true' &&
-      !['ArrowLeft', 'ArrowRight', 'Tab'].includes(ev.code)
+      !['ArrowLeft', 'ArrowRight', 'Tab'].includes(ev.key)
     ) {
       ev.preventDefault()
+    } else if (!this.multiline && ev.key === 'Enter' && formToSubmit) {
+      formToSubmit.requestSubmit()
     }
   }
 
@@ -324,7 +331,6 @@ export class LdInput implements InnerFocusable, ClonesAttributes {
     ])
 
     if (this.multiline) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { type, ...clonedAttributesWithoutType } = this.clonedAttributes
       return (
         <Host class={cl} onClick={this.handleClick}>
@@ -336,7 +342,7 @@ export class LdInput implements InnerFocusable, ClonesAttributes {
             part="input focusable"
             ref={(el) => (this.input = el)}
           />
-          {this.type === 'file' && (
+          {type === 'file' && (
             <span class="ld-input__placeholder" part="placeholder">
               {this.input?.value || this.placeholder}
             </span>

diff --git a/src/liquid/components/ld-input/test/ld-input.spec.ts b/src/liquid/components/ld-input/test/ld-input.spec.ts
@@ -423,4 +423,59 @@ describe('ld-input', () => {
     await waitForChanges()
     expect(root).toMatchSnapshot()
   })
+
+  it('requests submit on enter, if inside a form', async () => {
+    const { body, root } = await newSpecPage({
+      components: [LdInput],
+      html: `<form><ld-input name="example" /></form>`,
+    })
+
+    const form = body.querySelector('form')
+    form.requestSubmit = jest.fn()
+    const input = root.shadowRoot.querySelector('input')
+    input.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+    )
+
+    expect(form.requestSubmit).toHaveBeenCalled()
+  })
+
+  it('requests submit on enter, if form attribute is given', async () => {
+    const { body, root } = await newSpecPage({
+      components: [LdInput],
+      html: `
+      <form id="test"></form>
+      <ld-input form="test" name="example" />`,
+    })
+
+    const form = body.querySelector('form')
+    form.requestSubmit = jest.fn()
+    const input = root.shadowRoot.querySelector('input')
+    input.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+    )
+
+    expect(form.requestSubmit).toHaveBeenCalled()
+  })
+
+  it('prefers form attribute over surrounding form when requesting submit', async () => {
+    const { body, root } = await newSpecPage({
+      components: [LdInput],
+      html: `
+      <form id="test"></form>
+      <form id="surrounding"><ld-input form="test" name="example" /></form>`,
+    })
+
+    const referencedForm = body.querySelector<HTMLFormElement>('form#test')
+    const surroundingForm = body.querySelector<HTMLFormElement>('#surrounding')
+    referencedForm.requestSubmit = jest.fn()
+    surroundingForm.requestSubmit = jest.fn()
+    const input = root.shadowRoot.querySelector('input')
+    input.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })
+    )
+
+    expect(referencedForm.requestSubmit).toHaveBeenCalled()
+    expect(surroundingForm.requestSubmit).not.toHaveBeenCalled()
+  })
 })