[dev-v5] fix: double submit with Enter

[MarvinKlein1508]

🐛 Bug Report

Submitting an EditForm is executing the OnValidSubmit method twice. We thought this has already been fixed but it ain't working properly in the demos.

See #1050 for reference.

💻 Repro or Code Sample

See #4574

🤔 Expected Behavior

The submit event should be fired only once just like with native inputs.

😯 Current Behavior

The event is always be fired twice when using Fluent inputs.

🌍 Your Environment

• OS & Device: Windows 11 64 Bit
• Browser latest Firefox and Edge
• .NET 10 and latest dev-v5 branch

[m4ert]

I’ve been digging into this too and 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. I managed to hack around it in my environment by adding some JS to listen for the keydown and calling event.preventDefault() on the Enter key, but it definitely feels like something that should be handled and fixed directly in the web-component library.

Also, while debugging in EditFormPage.razor, I noticed the value printed to the console on submit is actually outdated. I haven't fully confirmed this one yet, but it looks like there might be a sync issue where the value isn't updating before the submit event fires.

[vnbaaij]

I've raised an issue for this in the wc repo: microsoft/fluentui#35802