0
528
VistasElementReference al elemento creado condicionalmente en Blazor
Estoy tratando de establecer el foco en el control de entrada que se representa condicionalmente. Estoy configurando ElementReference pero su identificación y contexto son nulos.
<button @onclick="ToggleInput">Show input</button> @if(showInput) { <input @ref="inputRef" type="text"/> } @code { private ElementReference inputRef; private bool showInput; async void ToggleInput() { showInput = !showInput; await inputRef.FocusAsync(); } }Cuando presiono el botón, muestra este error en la consola:
System.InvalidOperationException: ElementReference no se ha configurado correctamente
Mensaje de error completo:
Ejemplo de trabajo con error https://blazorrepl.com/repl/wbueaMPK28hf2NNv09
3 Respuestas
Responde la pregunta0
Esto parece funcionar y no tiene que ser un componente separado. Lo pegué justo en la página de inicio.
<button @onclick="ToggleInput">Show input</button> @if (showInput) { <input @ref="inputRef" type="text" /> } @code { private ElementReference inputRef; private bool showInput; protected async override Task OnAfterRenderAsync(bool firstRender) { if (showInput) await inputRef.FocusAsync(); } void ToggleInput() { showInput = !showInput; } }0
Mueva el cuadro de entrada a otro componente. Luego, puede conectarse al ciclo de vida del componente y llamar a .FocusAsync después de que se haya renderizado.
0
Tampoco es la solución perfecta, más bien una solución alternativa, pero lo siguiente funcionó para mí:
<button @onclick="ToggleInput">Show input</button> @if(showInput) { <input @ref="inputRef" type="text"/> } @code { private ElementReference inputRef; private bool showInput; async void ToggleInput() { showInput = !showInput; StateHasChanged(); await Task.Run(() => { if(inputRef.Context != null) inputRef.FocusAsync(); }); } }En mis pruebas, el contexto nunca fue nulo, por lo que probablemente no necesitaría la verificación. Pero prefiero que el foco no esté establecido a que se produzca una excepción.