Focando um elemento no Blazor

Depois de trabalhar no jogo Wordlzor que fiz recentemente, precisei adicionar uma funcionalidade bastante simples: focar o jogo inteiro ao entrar.

Isso precisava ser feito porque o usuário poderia realmente digitar no jogo e não apenas usar o teclado na tela.

##Arquivo Javascript

Para fazer isso, temos que criar um arquivo Javascript chamado app.js que conterá uma função

window.FocusElement = (element) => {
    element.focus();
};

Depois de fazer isso, precisamos incluir o script no arquivo index.html:

<script src="js/app.js"></script>

Componente Blazor

Depois de inicializarmos o script, precisamos encontrar um elemento no qual focar, portanto, em qualquer um de nossos componentes, precisamos referenciar esse elemento a um objeto.

Então, em nosso componente blazor, vamos adicionar uma div com Propriedade @ref:

<div @ref=@elementToFocus tabindex="0" >
    This is my focus component
</div>

Então na lógica do componente você pode ter a propriedade como um ElementReference:

/// <summary>
/// Reference to element
/// </summary>
private ElementReference elementToFocus;

Injetando JSInterop

Agora, para chamar a função que temos em nosso arquivo Javascript, precisamos usar JSInterop.

Primeiramente devemos injetá-lo no componente com a seguinte sintaxe:

[Inject]
public IJSRuntime JSRuntime { get; set; }

Com o serviço injetado, agora podemos chamar qualquer um dos métodos que ele possui, como InvokeVoidAsync, que chamará a função:

public async Task Focus()
{
    // Focus when initializing
    await JSRuntime.InvokeVoidAsync("window.FocusElement", elementToFocus);
}

E quando você chamar a função Focus(), ela focará o elemento que criamos, obviamente você pode refatorar e passar o próprio elemento como parâmetro.

Se quiser dar uma olhada em como eu implementei, dê uma olhada no código fonte do Wordlzor, usei ele para alertas e foco ao fechar o modal de instrução.