search

dotnet / aspnetcore

ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.
https://asp.net
MIT License
35.36k stars 9.99k forks source link

EditForm: After you hit submit the first time, any new tabbing through fields tries to resubmit #14859

Closed kevingates closed 5 years ago

kevingates commented 5 years ago

Describe the bug

A clear and concise description of what the bug is. When using the EditForm component, after the initial submission, if you tab through the fields again, every "Tab" action attempts a resubmission.

To Reproduce

Steps to reproduce the behavior:

  1. Using this version of ASP.NET Core 3.0
  2. Create and EditForm: (documentation)[https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.0]. Create FirstName, LastName fields, etc.
  3. Have your submit action do something where you stay on the page. For instance, I have a confirmation modal show.
  4. Go back to a Field like "First Name", make a change to the content.
  5. Tab over

For me, my Modal popup runs. This is caused only by the EditForm's OnValidSubmit attribute running my Submit function.

Expected behavior

A clear and concise description of what you expected to happen. Tabbing through input fields should never submit a form.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here. Include the output of dotnet --info

dotnet --info results

.NET Core SDK (reflecting any global.json):
 Version:   3.0.100
 Commit:    04339c3a26

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.15063
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\3.0.100\

Host (useful for support):
  Version: 3.0.0
  Commit:  7d57652f33

.NET Core SDKs installed:
  1.1.14 [C:\Program Files\dotnet\sdk]
  2.1.202 [C:\Program Files\dotnet\sdk]
  2.1.508 [C:\Program Files\dotnet\sdk]
  2.1.509 [C:\Program Files\dotnet\sdk]
  2.1.701 [C:\Program Files\dotnet\sdk]
  2.1.801 [C:\Program Files\dotnet\sdk]
  2.1.802 [C:\Program Files\dotnet\sdk]
  2.2.300 [C:\Program Files\dotnet\sdk]
  2.2.301 [C:\Program Files\dotnet\sdk]
  2.2.401 [C:\Program Files\dotnet\sdk]
  2.2.402 [C:\Program Files\dotnet\sdk]
  3.0.100-preview8-013656 [C:\Program Files\dotnet\sdk]
  3.0.100-rc1-014190 [C:\Program Files\dotnet\sdk]
  3.0.100 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.2.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.2.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.2.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.2.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.2.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.2.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.0.0-preview7.19365.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.0.0-preview8.19405.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.0.0-rc1.19457.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 1.0.16 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 1.1.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.2.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.2.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.2.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.0.0-preview7-27912-14 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.0.0-preview8-28405-07 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.0.0-rc1-19456-20 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.0.0-preview7-27912-14 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.0.0-preview8-28405-07 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.0.0-rc1-19456-20 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

I haven't tested this fully yet, but I think this was also occurring with just a plain html <form> tag used within Blazor Components. I had an issue a few weeks ago, and this may have been a related issue.

mkArtakMSFT commented 5 years ago

Thank you for filing this issue. In order for us to investigate this issue, please provide a minimalistic repro project (ideally a GitHub repo) that illustrates the problem.

mkArtakMSFT commented 5 years ago

Hi. We're closing this issue as we have heard no response from you for some time now. If you have more details and are encountering this issue please add a new reply and re-open the issue.

kevingates commented 5 years ago

@mkArtakMSFT Here's a repo: https://github.com/kevingates/Blazor_EditForm

pranavkm commented 5 years ago

@kevingates I haven't dug in to this super well, but it looks like a bug in your code. ShowModal is set when you submit - https://github.com/kevingates/Blazor_EditForm/blob/master/EditFormBug/EditFormBug/Pages/Index.razor - but nothing resets it. Once you've submitted the form, any time the Index component is rendered, the modal is still meant to be displayed. I'd have a look at how the modal component is built in the BlazingPizza sample - https://github.com/danroth27/BlazingPizza/ if you need to figure out a pattern for this.

kevingates commented 5 years ago

@kevingates I haven't dug in to this super well, but it looks like a bug in your code. ShowModal is set when you submit - https://github.com/kevingates/Blazor_EditForm/blob/master/EditFormBug/EditFormBug/Pages/Index.razor - but nothing resets it. Once you've submitted the form, any time the Index component is rendered, the modal is still meant to be displayed. I'd have a look at how the modal component is built in the BlazingPizza sample - https://github.com/danroth27/BlazingPizza/ if you need to figure out a pattern for this.

@pranavkm You are absolutely correct. I have the modal closing itself within the modal's code, but since the parent is only having its state updated (versus being reinitialized) you're right that I am have it re-shown. I have my callback function change my "modalSettings" to false after I hear back and it fixed the issue.

First, I apologize for posting a bug about my own mistake.

Second, I sincerely appreciate your help in pointing this out and for the Blazing Pizza example. I was looking for his code recently. I will bookmark this and maybe adopt his modal instead.

I will go ahead and close this issue.

Many thanks.