The purpose of this answer is to refute the validity of the accepted answer by the author
of the question himself.
Here's the code from the question as posted by the OP...
EditButton.razor
@namespace Woof.Blazor.Components
<button type="submit" class="@CssClass" @attributes="AdditionalAttributes">@ChildContent</button>
EditButton.razor.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Globalization;
using Microsoft.AspNetCore.Components;
namespace Woof.Blazor.Components
{
public partial class EditButton
{
[Parameter] public RenderFragment ChildContent { get; set; }
[Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; }
string CssClass
{
get
{
const string defaultClass = "btn btn-primary baseline";
if (AdditionalAttributes != null &&
AdditionalAttributes.TryGetValue("class", out var @class) &&
!string.IsNullOrEmpty(Convert.ToString(@class, CultureInfo.InvariantCulture)))
{
return $"{defaultClass} {@class} ";
}
else return defaultClass;
}
}
}
}
The following is my code for testing's purposes. Copy it into the Index page and run the app... Note that I'm using Blazor Server App.
@page "/"
@using System
@using System.Collections.Generic
@using System.Linq
@using System.Threading.Tasks
@using System.ComponentModel.DataAnnotations
@using Woof.Blazor.Components
<EditForm Model="@Model" OnValidSubmit="@HandleValidSubmit"
OnInvalidSubmit="@HandleInvalidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group">
<label for="name">Name: </label>
<InputText autocomplete="off" Id="name" Class="form-control"
@bind-Value="@Model.Name"></InputText>
<ValidationMessage For="@(() => Model.Name)" />
</div>
<div class="form-group">
<label for="body">Text: </label>
<InputTextArea autocomplete="off" Id="body" Class="form-control"
@bind-Value="@Model.Text"></InputTextArea>
<ValidationMessage For="@(() => Model.Text)" />
</div>
<EditButton>Save changes</EditButton>
</EditForm>
@code
{
private Comment Model = new Comment();
protected void HandleValidSubmit()
{
Console.WriteLine("Handle valid submit");
}
protected void HandleInvalidSubmit()
{
Console.WriteLine("Handle Invalid Submit");
}
public class Comment
{
[Required]
[MaxLength(10)]
public string Name { get; set; }
[Required]
public string Text { get; set; }
}
}
TEST 1
- Type a name in the Name field, and then tab to the Text field.
- Enter some text, But DO NOT PRESS THE TAB KEY: Leave the input focus in the Text field.
- With the mouse pointer click on the "Save changes" button, and then go to the Output window
- As you can see, the click on the button has submitted the form, and printed the text: "Handle valid submit"
This indicates that your assertion
Then the issue: if another edit component has focus, the button first must get focus, then it can be clicked
is not only false, but is clearly revealing how you 'choose' to ignore how UI elements in the Web and elsewhere behave.
TEST 2
Type a name in the Name field, and then with the mouse pointer click on the "Save changes" button. DataAnnotations validation immediately responds with the message: "The Text field is required."
Go to the Output window, and see the message: "Handle Invalid Submit"
Return to the Web page, and enter some text into the Text Field, and then
with the mouse pointer click on the "Save changes" button.
The red text message disappears.
Now go to the output window, and see that no message was issued, which
especially means that the click event has never been fired. This has lead you
to form the false assertion that "the click is not seen as click by the
browser itself." But, alas, there has never been a click on the "Save
changes" button. Your explanation is meaningless, and provide no value to
explain what is going on here...
When you direct the mouse pointer towards the "Save changes" button and
attempt to click it, the Text field lose focus, the result of which
is DataAnnotations code removes the red message, and the ensuing re-rendering
of the components involved. This is done in such a speed that you cannot
produce a click that will execute before the re-rendering. This code is
executed in the speed of light, but even if you were quick enough (speed of
light, right) to insert a click in the interval between loosing the focus to
initiating a re-rendering, the code is performed in a given order. In any
case, the fact remains that the components are re-rendered, and you did not
succeed in eliciting or issuing a click event because the "Save changes"
button did not have a focus. As I've shown in Test 1, no focus is needed. It
has always been like that, from the very beginning :)
TEST 3
- Type a name in the Name field, and then with the mouse pointer click on the "Save changes" button. DataAnnotations validation immediately responds with the message: "The Text field is required."
- Go to the Output window, and see the message: "Handle Invalid Submit"
- Return to the Web page, and enter some text into the Text Field, and then
with the mouse pointer move the focus to the Name field.
As you can see, the red message has been removed, that is to say, re-rendering
of the component has taken place.
4. Now, while the focus is in the Name field, with the mouse pointer click on
the "Save changes" button.
5. Go to the Output window, and see the message: "Handle valid submit"
TEST 4
Add the following onmouseover="document.getElementById('name').focus();" to the button
element in the EditButton.razor file. This comes instead of onmouseover="this.focus()"
used in the accepted answer as the solution.
Type a name in the Name field, and then with the mouse pointer click on the "Save changes" button. DataAnnotations validation immediately responds with the message: "The Text field is required."
Go to the Output window, and see the message: "Handle Invalid Submit"
Return to the Web page, and enter some text into the Text Field. Now,
as you move the mouse in the direction of the "Save changes" button,
the mouseover event is triggered, and the focus is set to the Name field.
Now, while the focus is in the Name field, with the mouse pointer click on
the "Save changes" button.
Go to the Output window, and see the message: "Handle valid submit"
Note that the behvior elicit by swaping onmouseover="this.focus()" with
onmouseover="document.getElementById('name').focus();" is identical
Clearly, you don't have to set the focus of the "Save changes" button in
order to issue a single click. A single click is possible only after the
component is refreshed by the code related DataAnnotations.
Wrapping up: Whatever you've said in your answer as well as comments are baseless,
wrong and misleading. The only assertion I agree with is that it was an easy question:
"You made at least 2 mistakes. First: you mistook this for an easy question"
Yes, it was an easy question, and I've provided an answer, given the details you provided,
that is correct, and that cannot even be invalidated by the current answer.
Please, remove your answer, as it is misleading and wrong. It certainly shouldn't be accepted.
EditButtonfrom? What is it? Please show that component – Vencovsky