fix(web-components): prevent text-input from submitting twice when Enter is pressed

change/@fluentui-web-components-5f5064f2-7321-4c0f-9435-dc5131990990.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "prevent text input from submitting its associated form twice when Enter is pressed",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -1012,8 +1012,6 @@ export class BaseTextInput extends FASTElement {
     autocomplete?: string;
     autofocus: boolean;
     // @internal
-    beforeinputHandler(e: InputEvent): boolean | void;
-    // @internal
     changeHandler(e: InputEvent): boolean | void;
     checkValidity(): boolean;
     clickHandler(e: MouseEvent): boolean | void;

packages/web-components/src/text-input/text-input.base.ts

@@ -418,19 +418,6 @@ export class BaseTextInput extends FASTElement {
     return this.elementInternals.form;
   }
 
-  /**
-   * Handles the internal control's `keypress` event.
-   *
-   * @internal
-   */
-  public beforeinputHandler(e: InputEvent): boolean | void {
-    if (e.inputType === 'insertLineBreak') {
-      this.implicitSubmit();
-    }
-
-    return true;
-  }
-
   /**
    * Change event handler for inner control.
    *

packages/web-components/src/text-input/text-input.spec.ts

@@ -699,6 +699,34 @@ test.describe('TextInput', () => {
     expect(page.url()).toMatch(/foo/);
   });
 
+  test('should only submit form once when Enter is pressed', async ({ fastPage }) => {
+    const { element, page } = fastPage;
+    const control = element.locator('input');
+    const form = page.locator('form');
+
+    await fastPage.setTemplate(/* html */ `
+      <form>
+        <${tagName} name="testinput"></${tagName}>
+      </form>
+    `);
+
+    await form.evaluate(node => {
+      node.addEventListener('submit', evt => {
+        if (!node.dataset.count) {
+          node.dataset.count = '0';
+        }
+        const count = Number(node.dataset.count) + 1;
+        node.dataset.count = String(count);
+        evt.preventDefault();
+      });
+    });
+
+    await control.focus();
+    await page.keyboard.press('Enter');
+
+    await expect(form).toHaveAttribute('data-count', '1');
+  });
+
   test('should allow comma-separated values when the `multiple` attribute is set and the `type` is "email"', async ({
     fastPage,
     page,

packages/web-components/src/text-input/text-input.template.ts

@@ -11,7 +11,6 @@ import type { TextInputOptions } from './text-input.options.js';
 export function textInputTemplate<T extends TextInput>(options: TextInputOptions = {}): ElementViewTemplate<T> {
   return html<T>`
     <template
-      @beforeinput="${(x, c) => x.beforeinputHandler(c.event as InputEvent)}"
       @focusin="${(x, c) => x.focusinHandler(c.event as FocusEvent)}"
       @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
     >