Permanent focus on element for code entry?

Question

JavaScript

The app is made with vue. There is a certain form of authorization, after filling in the field from the phones, an SMS with a code flies away. The code must be entered in the field that leaves. In principle, everything is implemented, but an unpleasant detail remains, when the curtain leaves, I throw the focus on the input and you can write code, but there is a very high probability that the user can simply poke anywhere on the screen and the focus disappears from the input, and I have it hidden. How to solve this problem?

Answer 1

How about making the element <input>occupy the entire block and clicking on any pseudo-box still hits it <input>?
PS Disgusting usability
https://jsfiddle.net/8adwgxyo/1/

Answer 2

I see no reason to catch the focus. I would hang a keyboard keystroke handler in the component on the mount, remove it on unmount. And for each box, take the desired index from the resulting line.
// edit
Vue I don't know, maybe it needs to be rewritten according to accepted canons.
And edge-cases also need to be covered.
https://jsfiddle.net/5zk2sw0j/1/