Keydown event handler on a text area rendered in a Webview2 control not detecting '@' character on Finnish (and other) keyboard layouts.

[koenvd]

Describe the bug

On Finnish keyboard the user needs to press "AltGr" & "2" key to enter the @ character

Apparently in the keydown event listener on a textarea in Webview2 the event.key property never get's the correct value. This works in Edge browser though ...

Steps to reproduce the bug

See here how Finnish keyboard produces '@' in Edge, but only '2' character in Webview2 in WinUI.

Screenshot to show difference:

Issue reproduces on other keyboard layouts as well from the moment AltGraph needs to be used.

Expected behavior

The value of event.key should be '@' in WinUI / Webview2 as well.

Screenshots

No response

NuGet package version

WinUI 3 - Windows App SDK 1.6.3: 1.6.241114003

Windows version

Windows 11 (21H2): Build 22000

Additional context

Using Microsoft.Web.WebView2 nuget package, version 1.0.2903.40

[DarranRowe]

It is detecting, the @ wouldn't go into the textarea if it wasn't detecting it.

What seems to be happening is that it is reporting the virtual key code in this situation and not translating it. This in itself isn't an issue, the underlying keyboard messages don't really report the character as is. The issue here is that it is a change in functionality and not what is expected though.

To give an example of what I mean, on my keyboard, the Euro (€) is AltGr + 4. If I log the key presses into a Windows API window, I get the following messages.

WM_KEYDOWN
VK_CONTROL
WM_KEYDOWN
VK_MENU
WM_KEYDOWN
VK_4
WM_KEYUP
VK_4
WM_SYSKEYUP
WM_CONTROL
WM_KEYUP
WM_MENU

In other words, what Windows reports to a window is just the raw virtual key code. A function like TranslateMessage is needed to get the actual character posted to the window in the WM_CHAR message.

[koenvd]

Thanks for jumping in @DarranRowe.

Just to be clear but this is inside Webview2 control so on the text area I'm doing:

textarea.addEventListener('keydown', (event) => {
     logEvent('keydown', event);
 });

printing out ${event.key}, AltGraph : ${event.getModifierState('AltGraph')
which has different results in Edge browser (correct) vs Webview2 ('2' iso '@).

So somehow Webview2 is indeed not correctly translating the key codes while Edge does.

I seem to remember some other WinUI3.0 - Webview2 bugs reported that were related how key strokes were sent from WinUI host app to Webview control. Maybe this is a side effect of that as well ...

[koenvd]

As I expected this also works correctly in a WPF with Webview2 control. So really WinUI3.0 - Webview2 issue I'm afraid ...

Maybe you know if this got reported already somewhere else @codendone / @duncanmacmichael ? (Can imagine MAUI apps as well being impacted by this)