From 7ca99a14efb7a4ca78065d93dcc89a562b275721 Mon Sep 17 00:00:00 2001
From: Daniel Leroux <daniel.leroux@siemens.com>
Date: Mon, 19 Jun 2023 16:35:48 +0200
Subject: [PATCH] fix(core/button): dispatch submit event with shadow button

---
 .../core/src/components/button/button.spec.ts | 41 --------------
 .../core/src/components/button/button.tsx     | 24 ++++++--
 .../src/components/button/test/button.spec.ts | 55 +++++++++++++++----
 3 files changed, 62 insertions(+), 58 deletions(-)
 delete mode 100644 packages/core/src/components/button/button.spec.ts

diff --git a/packages/core/src/components/button/button.spec.ts b/packages/core/src/components/button/button.spec.ts
deleted file mode 100644
index bdbae1dac70..00000000000
--- a/packages/core/src/components/button/button.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * 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', () => {
-  it('form submit', async (done) => {
-    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 form = page.doc.querySelector('form');
-
-    const onSubmit = jest.fn(() => {
-      done();
-    });
-
-    form.addEventListener('submit', onSubmit);
-    fireEvent.click(btn);
-
-    expect(onSubmit).toHaveBeenCalled();
-  });
-});
diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
index f7e2d988eab..479cb816e6e 100644
--- 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
index 903158ff181..5a310f7652c 100644
--- 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();
   });
 });