fix: double submit with Enter

[iotalambda]

🐛 Bug Report

When navigating to an EditForm's submit button by keyboard and hitting Enter, submit occurs twice.

💻 Repro or Code Sample

dotnet new install Microsoft.FluentUI.AspNetCore.Templates::4.1.1 dotnet new fluentblazor

Replace Counter.razor content with the following, tab your way to the FluentButton and hit Enter -> current count is incremented by 2.

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: <FluentBadge Appearance="Appearance.Neutral">@currentCount</FluentBadge></p>

<EditForm OnValidSubmit=@IncrementCount Model="new { }">
    <button type="submit">Submit with normal button -> +1</button>
    <FluentButton Appearance="Appearance.Accent" Type=@ButtonType.Submit>Submit with FluentButton -> +2</FluentButton>
</EditForm>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

🌍 Your Environment

Occurs at least in Edge and Firefox

[vnbaaij]

I just tried it with same template and your exact code. Not seeing this behavior:

[iotalambda]

I just tried it with same template and your exact code. Not seeing this behavior:

Did you submit by clicking the button? The bug does not occur when submitting by clicking - only when submitting by activating the button and then hitting Enter on your keyboard.

[vnbaaij]

No, did not do that. Will try that next

[vnbaaij]

Ok, can reproduce with Enter keypress...weird. While we search for a solution, a workaround is to remove the Type=ButtonType.Submit part from the code. The IncrementCount method will then only be called once.

[vnbaaij]

Of course, removing the submit is not alway going to be a viable solution.

I've traced back the bug all the way to the FAST source code (which is what is used to build the fluent-button web component that we wrap in our FluentButton component): https://github.com/microsoft/fast/issues/6704.

Unfortunately, it needs to be fixed there first. After that we need to get a new release of the web components script and integrate that in our library. I'm in contact with the FAST maintainers to see if and how this can be expidited but I'm afraid this behavior can not be changed/circumvented when usen the keyboard until the scripts get fixed.

[iotalambda]

Thanks @vnbaaij. Too bad the problem lies so deep.

Also, another workaround is to use a non-fluent submit button for the time being.

[grantcolley]

@vnbaaij do you have a solution in sight?

[vnbaaij]

No, nothing has changed. We anticipate it wont be fixed until we have the new web components