fix(core/button): append submit button only once(#1687)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>

.changeset/rare-tables-jam.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+Fix issue of `ix-button` which prevent a form get submitted twice in row.

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

@@ -90,6 +90,15 @@ export class Button implements IxButtonComponent {
     }
   }
 
+  componentDidRender() {
+    if (
+      this.submitButtonElement &&
+      !this.hostElement.contains(this.submitButtonElement)
+    ) {
+      this.hostElement.appendChild(this.submitButtonElement);
+    }
+  }
+
   dispatchFormEvents() {
     if (
       this.type === 'submit' &&

packages/core/src/components/button/test/button.ct.ts

@@ -9,6 +9,12 @@
 import { expect } from '@playwright/test';
 import { test } from '@utils/test';
 
+declare global {
+  interface Window {
+    submitCount: number;
+  }
+}
+
 test('renders', async ({ mount, page }) => {
   await mount(`<ix-button>Content</ix-button>`);
   const button = page.locator('ix-button');
@@ -59,3 +65,34 @@ test.describe('A11y', () => {
     await expect(button).not.toHaveAttribute('aria-disabled');
   });
 });
+
+test('form can be submitted multiple times', async ({ mount, page }) => {
+  await mount(`
+    <form id="test-form">
+      <input type="text" name="test-input" required minlength="1">
+      <ix-button type="submit">Submit</ix-button>
+    </form>
+  `);
+
+  await page.evaluate(() => {
+    const form = document.getElementById('test-form');
+    form?.addEventListener('submit', (e) => {
+      e.preventDefault();
+      window.submitCount = (window.submitCount || 0) + 1;
+    });
+  });
+
+  const button = page.locator('ix-button');
+  const input = page.locator('input[name="test-input"]');
+
+  for (let i = 0; i < 3; i++) {
+    await input.fill('test');
+    await button.click();
+    const submitCount = await page.evaluate(() => window.submitCount);
+    expect(submitCount).toBe(i + 1);
+    await page.waitForTimeout(100);
+  }
+
+  await expect(button).not.toHaveAttribute('disabled');
+  await expect(button).not.toHaveClass(/loading/);
+});

packages/storybook-docs/src/stories/button.stories.ts

@@ -9,6 +9,7 @@
 import type { ArgTypes, Meta, StoryObj } from '@storybook/web-components';
 import type { Components } from '@siemens/ix/components';
 import { genericRender, makeArgTypes } from './utils/generic-render';
+import { action } from '@storybook/addon-actions';
 
 type Element = Components.IxButton & { defaultSlot: string };
 
@@ -60,3 +61,22 @@ export const ButtonOutlineWithIcon: Story = {
     variant: 'primary',
   },
 };
+
+export const TypeSubmit: Story = {
+  render: (args) => {
+    const button = genericRender('ix-button', args);
+    const form = document.createElement('form');
+    form.appendChild(button);
+
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      action('Form submitted')();
+    });
+
+    return form;
+  },
+  args: {
+    defaultSlot: 'Button',
+    type: 'submit',
+  },
+};