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.