Blazor FocusOnNavigate sets tabindex=-1

user_899227 0
Viewed 125

I created a Blazor project and in App.razor I have this line:

<FocusOnNavigate RouteData="@routeData" Selector="input" />

FocusOnNavigate sets focus on the first input after navigating. This works fine, but I noticed that with tab you can focus to the next element, but getting the focus back on that element is not possible. This is because the input has tabindex="-1" now.

Why is a tabindex added? Is there a way to avoid this?

Update: I tried the autofocus attribute on an input without using FocusOnNavigate, but that doesn't work

blazor-server-side accessibility
1 Answers

In mozilla doc they said:

A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with JavaScript or visually by clicking with the mouse. It's mostly useful to create accessible widgets with JavaScript.

Note: A negative value is useful when you have off-screen content that appears on a specific event. The user won't be able to focus any element with a negative tabindex using the keyboard, but a script can do so by calling the focus() method.

and defends on that we can go around that by using onblure in your last input and set focus again on your first input:

<EditFrom Model=model>

 //Input 1
 <InputText @ref="inputText1"
            class="form-control"
            bind-Value="model.val1"/>

 //Input 2
 <InputText
    class="form-control"
    bind-Value="model.val2"
    @onblure= OnblureHandler/>
</EditForm>

@code{
 puplic class Model
 {
    public string val1 {get; set;}
    public string val2 {get; set;}
 }
 Model model {get; set;}
 InputText inputText1;
 
 private void OnblureHandler()
 {
  if(inputText1.Element.HasValue) 
  {
    inputText1.Element.Value.FocusAsync();
  }
 }
}
user_132563460
Related