vue3 y el focus

Las componentes de element-ui tienen muchas veces los mismos estilos para hover que para focus. Esto es bastante incordio porque después de haber pulsado un botón y salir del hover no hay cambios visibles, dado que sigue en focus. Hay que acceder a los elementos para darles un blur.

La forma estándar de hacer esto en javascript

document.activeElement.blur()

no se recomienda porque no se garantiza que acceda al DOM oculto. Hay que ir via $refs o via $el. En nuestro caso, dado que estamos usando componentes de una librería de terceros, solo se puede hacer de la segunda manera:

this.$refs.btnCopia.$el.blur()

Un tercer metodo es asignar a otro elemento:

this.$root.$refs.cb.focus()
this.$root.$refs.cb.blur()

Esto puede ser eficaz si no tenemos claro cómo acceder a la subcomponente correcta.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.