[Blazor] OnValidSubmit not invoked when submit button clicked

[brianlagunas]

Describe the bug

When the ValidationSummary is define at the top of the EditForm, and you have existing errors in the form, if you fix the error and then immediately click the submit button, the errors are fixed however the submit button does not invoke OnValidSubmit.

If you define the ValidationSummary at the end of the EditForm and perform the same task, it will work as expected.

This doesn't work

<EditForm Model="@person" OnInvalidSubmit="@HandleInvalidSubmit" OnValidSubmit="@HandleValidSubmit">

    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText @bind-Value="person.Name"></InputText>
    <InputNumber @bind-Value="person.Age"></InputNumber>
    <button type="submit">Submit</button>
</EditForm>

This works:

<EditForm Model="@person" OnInvalidSubmit="@HandleInvalidSubmit" OnValidSubmit="@HandleValidSubmit">

    <DataAnnotationsValidator />

    <InputText @bind-Value="person.Name"></InputText>
    <InputNumber @bind-Value="person.Age"></InputNumber>
    <button type="submit">Submit</button>

    <ValidationSummary />
</EditForm>

I believe this is occurring because when you click the submit button, focus is lost from the inputs which causes the errors to be fixed, however the submit button is not actually clicked. Therefore the OnValidSubmit event is not fired.

To Reproduce

Steps to reproduce the behavior:

1. Using this version of ASP.NET Core 3.0.100-preview7-012821
2. Run this code (see above snippets)

Expected behavior

When the ValidationSummary is defined at the top of the EditForm, and an error is fixed. I should should be able to click the submit button and have the OnValidSubmit event invoked

Screenshots

Video of bug: https://clips.twitch.tv/AuspiciousDepressedSproutPeteZarollTie

Video of workaround: https://www.twitch.tv/videos/463432083

[brianlagunas]

Added videos clips of the twitch stream which demonstrates the issue.

[campersau]

From the video it looks like the button is not clicked the first time because the content jumps up because the validation message is removed. I would suggest adding some CSS so the content does not jump or try use the keyboard navigation e.g. tab -> enter then it should work the first time.

[brianlagunas]

@campersau That was exactly it! Thanks!