diff --git a/change/@fluentui-web-components-5f5064f2-7321-4c0f-9435-dc5131990990.json b/change/@fluentui-web-components-5f5064f2-7321-4c0f-9435-dc5131990990.json new file mode 100644 index 0000000000000..e59b0cdf5b6a0 --- /dev/null +++ b/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" +} diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md index f2c83e1388d52..b76ecb4bfd246 100644 --- a/packages/web-components/docs/web-components.api.md +++ b/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; diff --git a/packages/web-components/src/text-input/text-input.base.ts b/packages/web-components/src/text-input/text-input.base.ts index b54dcf861c5f2..1326aca0153cd 100644 --- a/packages/web-components/src/text-input/text-input.base.ts +++ b/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. * diff --git a/packages/web-components/src/text-input/text-input.spec.ts b/packages/web-components/src/text-input/text-input.spec.ts index f88e019b164bd..ff957f0ecb518 100644 --- a/packages/web-components/src/text-input/text-input.spec.ts +++ b/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 */ ` +
+ `); + + 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, diff --git a/packages/web-components/src/text-input/text-input.template.ts b/packages/web-components/src/text-input/text-input.template.ts index 0a46b61867df6..d10a5385f09a7 100644 --- a/packages/web-components/src/text-input/text-input.template.ts +++ b/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