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 ves 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