search

Blazored / FluentValidation

A library for using FluentValidation with Blazor
https://blazored.github.io/FluentValidation/
MIT License
588 stars 84 forks source link

Pressing Submit button with mouse on editform triggers validation but does not fire OnValidSubmit until a second click with mouse. #81

Closed bortolano closed 3 years ago

bortolano commented 3 years ago

Describe the bug A page contains two InputText and a submit button using . Enter text in both boxes that meets the validator rules. Don't leave the second box, but instead use the mouse to click on the submit button. Validation occurs and OnValidSubmit is executed.

Now, enter text in the first box, but not the second. State is invalid and the validator correctly catches this and displays error. Fix the validation error by filling in the second box. Do not tab out, but instead take the mouse and click the submit button. At this point, the validation errors disappear (editform is validated again) but the OnValidSubmit does not execute. A second mouse-click on the button is required to fire OnValidSubmit.

To Reproduce Steps to reproduce the behavior: I have attached a simple solution that can be used to recreate the issue (Visual Studio 2019, .NET 5.0 Blazor Server with 2 class libraries).

screenshot01 screenshot02

Expected behavior I expected that, when I use the mouse to click on Submit, the validation would occur and, if the data was in a valid state, the OnValidSubmit would fire without having to click it a second time. This is inconsistent behavior from when the data is in a valid state and the submit button is clicked, it does not require a second mouse-click to submit it.

Screenshots Screenshots attached.

Hosting Model (is this issue happening with a certain hosting model?): Blazor Server (Server Rendered) Visual Studio 2019 - .NET 5.0 project.

Additional context I broke the models out into their own class library and the validations out into their own class library to keep the business rules separate from my UI. I acknowledge that I could unintentionally be breaking something in the process, but I don't believe that to be the case. If so, I apologize ahead of time!

FVIssue.zip

Thanks for all your hard work. Blazored.FluentValidation is really slick!

chrissainty commented 3 years ago

Thanks for reporting this @bortolano. I haven't seen this behaviour myself but I'll have a look into it as soon as I can.

chrissainty commented 3 years ago

So I've had a chance to look into this and as far as I can see this is actually just a rendering issue. You don't actually need to click twice, depending where you click.

When you start to press on the submit button after entering a value in the password field, the validation is triggered and the error message is removed from the UI as the focus is lost on the password box. However, this makes the submit button jump up the page and the click ends up happening on the space where the submit button used to be.

You can see this for yourself if you click on the submit button right at the very top as the click still lands inside the button after it jumps up the page.

I hope that all makes sense. I'm going to close this as there isn't actually a problem to fix.