fix(core/button): dispatch submit event with shadow button

siemens · Jun 19, 2023 · 7ca99a1 · 7ca99a1
1 parent 3e91ecf
commit 7ca99a1
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 58 deletions.
diff --git a/packages/core/src/components/button/button.spec.ts b/packages/core/src/components/button/button.spec.ts
diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
@@ -57,12 +57,26 @@ export class Button {
 
   @Element() hostElement: HTMLIxButtonElement;
 
-  dispatchFormEvents() {
+  /**
+   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)
+   */
+  submitButtonElement: HTMLButtonElement;
+
+  componentDidLoad() {
     if (this.type === 'submit') {
-      const form = this.hostElement.closest('form');
-      form?.dispatchEvent(
-        new Event('submit', { bubbles: true, cancelable: true })
-      );
+      const submitButton = document.createElement('button');
+      submitButton.style.display = 'none';
+      submitButton.type = 'submit';
+      submitButton.tabIndex = -1;
+      this.hostElement.appendChild(submitButton);
+
+      this.submitButtonElement = submitButton;
+    }
+  }
+
+  dispatchFormEvents() {
+    if (this.type === 'submit' && this.submitButtonElement) {
+      this.submitButtonElement.click();
     }
   }
 

diff --git a/packages/core/src/components/button/test/button.spec.ts b/packages/core/src/components/button/test/button.spec.ts
@@ -7,7 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { newSpecPage } from '@stencil/core/testing';
-import { fireEvent } from '@testing-library/dom';
 import { Button } from '../button';
 
 describe('button', () => {
@@ -22,29 +21,61 @@ describe('button', () => {
     expect(btn.className).toContain('disabled');
   });
 
-  it('should submit form if type is submit', async () => {
+  it('should not render submit button if normal button is requirers', async () => {
     const page = await newSpecPage({
       components: [Button],
       html: `
-        <form>
-          <input name="some_input" />
-          <ix-button type="submit">Example</ix-button>
-        </form>
+      <form>
+        <input type="text" />
+        <ix-button>Submit</ix-button>s
+      </form>
       `,
     });
 
     await page.waitForChanges();
-    const submitButton = page.doc
+
+    const btn = page.doc
       .querySelector('ix-button')
       .shadowRoot.querySelector('button');
-    const form = page.doc.querySelector('form');
+    const shadowButton = page.doc.querySelector(
+      'ix-button > button'
+    ) as HTMLButtonElement;
+
+    expect(btn).toBeDefined();
+    expect(shadowButton).toBeNull();
+  });
+
+  it('should submit form if type is submit', async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+      <form>
+        <input type="text" />
+        <ix-button type="submit">Submit</ix-button>s
+      </form>
+      `,
+    });
+
+    await page.waitForChanges();
+
+    const btn = page.doc
+      .querySelector('ix-button[type="submit"]')
+      .shadowRoot.querySelector('button');
+    const shadowButton = page.doc.querySelector(
+      'ix-button[type="submit"] > button'
+    ) as HTMLButtonElement;
 
-    const onSubmit = jest.fn();
+    const onClick = jest.fn();
 
-    form.addEventListener('submit', onSubmit);
+    shadowButton.addEventListener('click', onClick);
 
-    fireEvent.click(submitButton);
+    expect(btn).toBeDefined();
+    expect(shadowButton).toBeDefined();
+    expect(shadowButton.style.display).toStrictEqual('none');
+    expect(shadowButton.type).toStrictEqual('submit');
+    expect(shadowButton.tabIndex).toStrictEqual(-1);
 
-    expect(onSubmit).toHaveBeenCalled();
+    btn.click();
+    expect(onClick).toHaveBeenCalled();
   });
 });