Enfocando un elemento en Blazor

Después de trabajar en el juego Wordlzor que hice recientemente, necesitaba agregar una funcionalidad bastante simple: enfocar todo el juego al ingresar.

Esto debía hacerse porque el usuario podía escribir en el juego y no solo usar el teclado en pantalla.

archivo Javascript

Para hacer esto, tenemos que crear un archivo Javascript llamado app.js que contendrá una función

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

Una vez hecho esto, debemos incluir el script en el archivo index.html:

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

Componente Blazor

Una vez que hemos inicializado el script, necesitamos encontrar un elemento en el que enfocarnos, por lo que en cualquiera de nuestros componentes, debemos hacer referencia a ese elemento a un objeto.

Entonces, en nuestro componente Blazor, agreguemos un div con el Propiedad @ref:

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

Luego, en la lógica del componente, puede tener la propiedad como ElementReference:

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

Inyectando JSInterop

Ahora, para poder llamar a la función que tenemos en nuestro archivo Javascript, necesitamos usar JSInterop.

Primero que nada debemos inyectarlo en un componente con la siguiente sintaxis:

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

Con el servicio inyectado, ahora podemos llamar a cualquiera de los métodos que tiene, como InvokeVoidAsync, que llamará a la función:

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

Y cuando llamas a la función Focus(), se enfocará en el elemento que creamos, obviamente puedes refactorizar y pasar el elemento en sí como parámetro.

Si quieres ver cómo lo implementé, mira el código fuente de Wordlzor, lo usé para alertas y enfoque al cerrar el modal de instrucciones.