[Bug]: double submit with enter

[vnbaaij]

Component

TextInput

Package version

3.0.0-rc.5

@microsoft/fast-element version

2.10

Environment

found when used from Blazor library. See also https://github.com/microsoft/fluentui-blazor/issues/4575

Current Behavior

When using a form that contains a text input, pressing enter cause the form to be submitted twice,

We found the root cause in fluent-text-input (inside text-input.base.ts).

Basically, both beforeinputHandler and keydownHandler are firing when you hit Enter. Since they both trigger implicitSubmit, we get that double-submit behavior.

There are ways to hack around it by adding some JS to listen for the keydown and calling event.preventDefault() on the Enter key, but this should be handled and fixed directly in the web-component.

Expected Behavior

Pressing enter only submits the form once

Reproduction

https://stackblitz.com/edit/typescript-9oz1vovp?file=index.html

Steps to reproduce

See the text in current behavior and look at the linked functions. You can see submit is being called twice

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

Blazor library

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.