viernes, 21 de enero de 2022

Formulario en muddialog en linea y parpadeos

 Sintomas

Usas el componente Dialog de MudBlazor para abrir un formulario simple, el problema es que cada vez que teclean algo el formulario parpadea.

Detalles

  • El código del dialogo lo has incluido en línea, usando la propiedad visible del componente
  • Los campos tiene validación simple (requerido y máxima longitud).

Motivo

Por algún motivo al validar cada tecla se lanza un renderizado de página y el dialogo realiza la transición de apertura.

Solución (o parche)

Debes detener el renderizado con una variable y sobrecargando el evento 

        private bool _renderizar = true;
        protected override bool ShouldRender()
        {
            return _renderizar && base.ShouldRender();
        }

El valor de _renderizar debe cambiar a falso después de haber renderizado el dialogo, para lo que usamos el evento IsVisibleChanged del componente muddialog

<MudDialog IsVisible="@visible" Options="opcionesDlg" IsVisibleChanged="CambioVisibleDialogo">...

private void CambioVisibleDialogo(bool visible)
{
    if (visible) _renderizar = false;
}

Deberemos reactivar el renderizado antes de ocultar el dialogo, por ejemplo:

<MudIconButton Icon="@Icons.Material.Outlined.Cancel 
       OnClick="@(()=>{_renderizar=true; visible=false;})"/>


No hay comentarios: