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

Author: danielleroux

packages/core/src/components/icon-button/icon-button.tsx

@@ -78,12 +78,26 @@ export class IconButton implements Button {
    */
   @Prop() type: 'button' | 'submit' = 'button';
 
-  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();
     }
   }
 

packages/core/src/components/icon-button/test/icon-button.spec.ts

@@ -20,4 +20,62 @@ describe('icon-button', () => {
     const btn = page.doc.querySelector('ix-icon-button');
     expect(btn.className).toContain('disabled');
   });
+
+  it('should submit form if type is submit', async () => {
+    const page = await newSpecPage({
+      components: [IconButton],
+      html: `
+      <form>
+        <input type="text" />
+        <ix-icon-button type="submit">Submit</ix-icon-button>s
+      </form>
+      `,
+    });
+
+    await page.waitForChanges();
+
+    const btn = page.doc
+      .querySelector('ix-icon-button[type="submit"]')
+      .shadowRoot.querySelector('button');
+    const shadowButton = page.doc.querySelector(
+      'ix-icon-button[type="submit"] > button'
+    ) as HTMLButtonElement;
+
+    const onClick = jest.fn();
+
+    shadowButton.addEventListener('click', onClick);
+
+    expect(btn).toBeDefined();
+    expect(shadowButton).toBeDefined();
+    expect(shadowButton.style.display).toStrictEqual('none');
+    expect(shadowButton.type).toStrictEqual('submit');
+    expect(shadowButton.tabIndex).toStrictEqual(-1);
+
+    btn.click();
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should not render submit button if normal button is requirers', async () => {
+    const page = await newSpecPage({
+      components: [IconButton],
+      html: `
+      <form>
+        <input type="text" />
+        <ix-icon-button>Submit</ix-icon-button>s
+      </form>
+      `,
+    });
+
+    await page.waitForChanges();
+
+    const btn = page.doc
+      .querySelector('ix-icon-button')
+      .shadowRoot.querySelector('button');
+    const shadowButton = page.doc.querySelector(
+      'ix-icon-button > button'
+    ) as HTMLButtonElement;
+
+    expect(btn).toBeDefined();
+    expect(shadowButton).toBeNull();
+  });
 });