Uncaught Error: Cannot get key code from the keyboard event. Keydown event without code on chrome

[AlexisGado]

Bug Description:

When I click a datalist option linked to an input on Chrome (not Firefox), a keydown event is triggered. This event does not have a key/code/keycode. I don't know if it is a bug of Chrome but in any case, the widget listens keydown events and tries to find the key. Exception is thrown here. The event should probably just be ignored in this case.

This error once happened with electron but it is probably not relevant anymore

Steps to Reproduce:

1. Create an input and link it with a datalist containing several options in Chrome.
2. Listen for keydown events.
3. Click an option
4. Observe that there is no key information in the event.

Additional Information

• Operating System: Windows 10, Chrome 97
• Theia Version: Last, 1.22 (browser)

[Emeka-Ugbanu-hub]

i would love to help with this and I need more information on it

[AlexisGado]

Thanks for your help @Emeka-Ugbanu-hub !

Here is a small fiddle to reproduce the issue. https://jsfiddle.net/n1try0Lj/1/ First try to press some regular keys and look at the console. Then try to click ( or press enter while focused on ) an option of the input dropdown Here, Theia tries to find one of the values key/code/keycode(deprecated)/keyIdentifier(don't know what is is) and throws the exception if none is found. The issue appears on Chromium (Chrome and Edge) but not on Firefox. I didn't test on Safari

[AlexisGado]

If you want to reproduce it in Theia, just add this small html pattern inside a widget and Theia will listen the keydown events and throw the error

[Emeka-Ugbanu-hub]

The keyCode property is deprecated to prevent RUN-TIME ERRORS in the future and it should be avoided. But if you tell me what the main goal is I could find an alternative solution.

[AlexisGado]

My goal is just to make an input with options but I don't want errors thrown in my console by Theia. I just propose that Theia ignores keydown events without key or code (Those are not supposed to exist and it might be a Chromium bug). This exception does not protect from important bugs as far as I know.

I don't know how to easily share an example with a full Theia app but I believe that the issue is pretty clear when looking at the fiddle I shared and at the toKey method which throws the exception.

Btw, the event is listened at various places in the app : widget.ts and frontend-application.ts for example. (These two are causing my errors but there might be others).

[Emeka-Ugbanu-hub]

[AlexisGado]

Thank you for your help but I am reporting this issue here since the exception is thrown by Theia and not by my code. I am not trying to read event.code but Theia automatically does and fails because of the unusual structure of such an event.

I don't think I am ready yet to make a PR for Theia, I still need a better understanding of the code base.

[Emeka-Ugbanu-hub]

Ok

[AlexisGado]

I updated the fiddle so it's a bit easier to understand : https://jsfiddle.net/n1try0Lj/1/ I tried to stopPropagation() on this event as a temporary workaround but it only partially works. For some reason, the event does not propagate to the listener of the BaseWidget anymore but it still hits the FrontendApplication's listener (see my comment above for the references to the code). I still think that the exception might be unnecessary here.

[Emeka-Ugbanu-hub]

in the fiddle keycode and key identifier returns undefined but key and code works fine

[AlexisGado]

Maybe it will be more understandable with this clip. I confirm this is a Chrome specific issue. It appears on Mac OS and Windows.

https://user-images.githubusercontent.com/56356237/152841951-6e07ba37-b147-495a-8347-f419948192ec.mp4