EditForm OnSubmit handler not firing

[djfriedman42]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

I have a test app that exhibits an issue whereby the OnSubmit callback for an EditForm does not always fire when the submit button is clicked. I am trying to find out if the behavior shown in this test app is expected or if it is a bug.

It seems that if a required form field is blanked out and then the submit button is clicked (i.e. without navigating out of the form field), the UI validation is completed but the OnSubmit handler is not invoked.

Note: my team's application makes use of custom validations, so we use OnSubmit within EditForm rather than OnValidSubmit and OnInvalidSubmit.

Expected Behavior

I would expect that the OnSubmit handler is fired every time the submit button is clicked.

Steps To Reproduce

GitHub repo with test app that shows the issue. Video clip attached.

Exceptions (if any)

No response

.NET Version

7.0.306

Anything else?

No response

[DM-98]

Hello,

The reason for this is because your validation messages are shifting the elements out of the way, before the button is even pressed. It validates on every blur. Also called Cumulative Layout Shift in this case. Try moving the button above the text and validation messages, and see the result. So it's not a bug.

[djfriedman42]

Thank you @DM-98 , moving the button above the text input and validation message block solves it.

Hopefully there is another method by which I could still have the Submit button render at the bottom of the form inputs and yet not be affected by that shift...

[jsmarsch]

NM -- I must be slow today! I understand @DM-98.

Disregard (I didn't want to delete, in case you were already responding)

@DM-98 That certainly seems to fix it. However, I'm a little confused. It's very common to have fields that validate on blur, and it's also very common to have submit/cancel buttons at the bottom of the form (where they will be subject to CLS). While I've certainly seen the shift occur in many frameworks, I've not experienced the problem where you stop receiving UI events in other frameworks. Is there a suggested workaround for this that does not require either disabling field validation on blur, or moving your save/cancel buttons to the top of the form?

[DM-98]

@djfriedman42

It's a little tricky, but it's possible with the EditContext' OnFieldChanged event handler:

1. Create a boolean field: bool isValidationMessageHidden = true;
2. Add a style that determines to hide/show validation summaries to ValidationSummary and all ValidationMessage For...:

   <ValidationSummary style="@(isValidationMessageHidden ? "display: none;" : "display: block;")" />
   and
   <ValidationMessage For="@(() => _model.Title)" style="@(isValidationMessageHidden ? "display: none;" : "display: block;")" />

3. Create an EditContext field: EditContext? _editContext;
4. Initialize (OnInitialized) the EditContext to the model: _editContext = new EditContext(_model);
5. Initialize the eventhandler: _editContext.OnFieldChanged += HandleFieldChanged;
6. Create the method for the eventhandler: void HandleFieldChanged(object? sender, FieldChangedEventArgs e) => isValidationMessageHidden = true;
7. Set isValidationMessageHidden = false; at the very end of your HandleSubmit-method

Now it shows the validation message on submit instead of on blur.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.