Posts

Showing posts from February, 2020

Blazor Autofocus on Input field

Image
My use case is that when a data entry form is displayed I want the first input field to have the focus set on it. In a straight HTML application you can just use the autofocus html attribute.  But as the writing of this post, Blazor does not support the autofocus attribute naturally or with using the @attribute dictionary assignment.  In order to meet this use case, we will need to use JSInterop.  This is a little disappointing but it does show the flexibility of Blazor. To achieve the experience we want, we will use java-script to set the autofocus attribute on the input field we want.  We will create a function and pass in the CSS to look for. In the java-script, we will use a selector to find the CSS class name passed in and then set the autofocus attribute:     function focusInputFromBlazor(selector) {         var input = document.querySelector(selector);         if (!focusInput(input)) {             input = input.querySelector("input");             focusInput