Search code examples
google-chromevuejs3chromiumvirtual-keyboard

Chrome virtual keyboard with Vue JS 3 issue

I'm running VueJS 3 project on a Raspberry Pi with a touch screen. Currently I'm using Chromium 88 and I have installed the Chrome Virtual Keyboard: https://chrome.google.com/webstore/detail/virtual-keyboard/pflmllfnnabikmfkkaddkoolinlfninn

On the Raspberry as well on Windows, all the events that the virtual keyboard is emiting are with empty key value, hence - nothing happens to the inputs.

enter image description here

Every key emits 3 events, all like this:

type:"keydown"
key:""
ctrlKey:false
shiftKey:true
altKey:false
metaKey:false

type:"keypress"
key:""
ctrlKey:false
shiftKey:false
altKey:false
metaKey:true

type:"keyup"
key:""
ctrlKey:false
shiftKey:false
altKey:false
metaKey:true

Have anyone dealt with such issue?

Strange thing for is that when you press them, you can see that the input reflects the keys but as soon as you stop pressing the keys, they letters disappear: enter image description here

Thanks!

Solution

  • If someone else is struggling with this in the future:

    It turned out that the extension is very very old and not maintained by anyone, didn't even tried to fork it, it had like 20 forks with no result at the end. Didn't want to make custom extension because of the time needed to do it.

    So, at the end I ditched the keyboard extension and used the VueJS 3 simple-keyboard by Francisco Hodge (hodgef) :

    https://github.com/hodgef/simple-keyboard

    With a little bit of rework of the simple-keyboard and managed to get it up and running with no issues at all.