El evento keyup
se gatilla cuando el usuario suelta una tecla. Un flujo de ejemplo sería:
- Presiono una tecla
- se gatilla
keydown
porque la tecla tocó el fondo del teclado (figurativamente) - Si la tecla genera ingreso de texto, se gatilla
keypress
- El browser procesa la acción
- Si corresponde, dada la acción, se actualiza el estado (ej el estado del DOM) acorde a ésta.
- Terminan los cambios de estado
- Se gatilla
keyup
porque la tecla volvió a su posición original
Por otro lado, un select cerrado escucha a la tecla enter
, pero un select desplegado no. Ocurre que aunque las opciones sí pueden gatillar eventos de teclado, tales eventos:
- sólo se emiten al elemento seleccionado (la opción)
- las opciones no son un elemento "focusable" (como el select o el input), luego no emiten
keydown,keypress,keyup
.
De manera que ese control se hace indirectamente desde el select con el evento change.
En tu flujo, si pinchas el select cerrado y aprietas enter
, no se gatilla change
y el select sí detecta las teclas (es focusable). Cuando , en cambio, usas el enter en una opción:
- Presiono Enter
- Se gatilla keydown sobre el elemento que tiene el focus (la opción, no gatilla handlers)
- La tecla no genera ingreso de texto, se omite
keypress
- Se procesa la acción
- La acción gatilla un cambio de estado
5.1. Los cambios de estado gatillan un evento change
5.2. El evento change gatilla tu función ChangueSelectProduct
5.3. Esa función cambia el foco a input de texto
- Se procesaron los cambios de estado
- Se gatilla keyup sobre el elemento que tiene el focus (ahora es el input). Gatilla handler.
La anomalía que vezves se debe a que cambias el focus en el paso 5.3, cuando se emite keyup
el focus cambió a un elemento focusable.
Solución:
Utiliza @keydown
en vez de @keyup
https://codepen.io/amenadiel/pen/ExjbgjX