SetFocus no Blazor com Interop

Nesse artigo vamos ver como criar um método de extensão para colocar o foco do teclado em um input HTML.

Para alcançar esse objetivo vamos utilizar o recurso de Interop JavaScript. Se você ainda não sabe como fazer sua aplicação Blazor conversar com código JavaScript, leia esse artigo. Iremos partir do exemplo criado nesse artigo para criar um SetFocus no Blazor

Função JavaScript

A ideia do exemplo que vamos desenvolver aqui, é criar um método de extensão C#, que irá chamar uma função JavaScript para colocar o foco do teclado em um determinado input do componente.

Vamos criar a função JavaScript que irá realizar essa operação. Como você pode ver na Figura 1, crie uma função chamada focusElement no seu arquivo funcoes.js.

Figura 1: Função focusElement para colocar foco em elemento via JavaScript

Veja que essa função recebe um elemento HTML e chama o seu respectivo método focus(), que coloca o foco do teclado no elemento em questão.

ElementRef

Como vimos, a função JavaScript recebe um elemento HTML como parâmetro. No Blazor, precisamos usar um objeto da classe ElementRef, para fazer essa passagem de parâmetro.

Esse ElementRef serve única e exclusivamente para criar uma referência à um elemento HTML, para que ele possa ser passado como parâmetro para uma função JavaScript, através de Interop.

Vamos criar um ElementRef no componente TesteInterop.razor, como você pode conferir na Figura 2.

Figura 2: Declarando um ElementRef para o input de mensagem

No exemplo foi criado um atributo do tipo ElementRef chamado mensagemInput. Para a referência ser completa, basta incluir a tag ref no input, indicando o nome do ElementRef criado.

Método de Extensão

Para que a implementação SetFocus fique mais elegante, vamos cria-la como um método de extensão, na classe HtmlHelper. Crie essa classe numa pasta chamada Helpers no seu projeto.

Como mostra a Figura 3, o método de extensão recebe como parâmetro o tipo ElementRef que será estendido. E também recebe uma instância do serviço IJSRuntime, para fazer o Interop com JavaScript.

O método SetFocus simplesmente faz o Interop chamando a função focusElement. E passa para essa função o elemento HTML onde queremos colocar o foco.

Usando o SetFocus

Para fechar, basta utilizarmos o método SetFocus lá no componente TesteInterop.razor. A primeira coisa a fazer é incluir a diretiva @using, para indicar que precisamos das classes do namespace MyBlazorApp.Helpers, como mostra a Figura 4.

Figura 4: Incluindo @using MyBlazorApp.Helpers;

Em seguida sobrecarregue o método OnAfterRenderAsync do componente. Esse método é executado após o término da renderização, o que nos garante que já teremos todos os elementos do componente renderizados no browser.

E no método OnAfterRenderAsync faça a chamada ao método SetFocus, como mostra a Figura 5.

Figura 5: Chamando o método de Extensão SetFocus

Com o @using feito anteriormente, o atributo mensagemInput ganha o método de extensão SetFocus. E para concluir a chamada, passamos como parâmetro o JSRuntime que já foi previamente injetado nesse componente.

Execute sua aplicação e navegue ao componente /interop. Você verá que logo ao abrir a página, o foco do teclado é colocado no input.

Espero que esse artigo seja útil. Grande Abraço e até o próximo!