Currently facing an unusual issue related to processing time. The problem seems to be with a PIN input that consists of 4 inputs. You can observe the behavior in action on this stackblitz code snippet I have set up: https://stackblitz.com/edit/vue-fezgmd?file=src%2Fcomponents%2FHelloWorld.vue
Focus on these two functions: nextInput and handleKeyUp. I have maintained the remaining code to ensure seamless functionality without causing crashes.
Assuming everything is working correctly ⇒ handleKeyUp will trigger nextInput and pass a parameter called key, representing the pressed key. Here's how nextInput function operates:
const nextInput = (key: string): void => {
console.log(key)
if (
focusOn.value !== null &&
focusOn.value < props.length - 1
) {
code[focusOn.value] = key
inputs[focusOn.value + 1].focus()
}
focusOn.value => index
code => reactive object[Array] bind to the v-model input
The objective here is to assign the key value to the respective input field. However, there are instances (particularly when typing rapidly) where the console.log(key) displays the pressed key, but the input field does not retain that value, as shown here: https://i.sstatic.net/7tjBl.png
You can see that "5" is logged in the console, indicating the key pressed, yet the last input field does not display the assigned value.
I have attempted various conditional statements without success, struggling to identify the root cause. Any assistance or suggestions would be greatly appreciated!