Cannot type dead keys (accented characters) or use Input Method Editor on a LineEdit exported to HTML

[ofrias]

Godot version:
Godot v3.2.3

OS/device including version:
MacOS exporting to HTML

Issue description:
Cannot type dead keys (needed to enter accented characters) inside a LineEdit which has been exported to HTML.

Steps to reproduce:

1. Open this project:
   https://origamer.itch.io/ortografiator
2. Try to enter any accented character in the input field (a LineEdit). When you press the dead key (for example ^ or ' or ` or ") nothing will happen, and when you press the vowel key it will appear as a standard vowel, without the accent.

Minimal reproduction project:
Any project with a LineEdit.

[Calinou]

cc @Faless

@ofrias Which keyboard layout are you using?

[ofrias]

@Calinou Spanish layout.

I have been testing accessing the HTML page on different computers and these are the results:

• Mac: affected
• Linux: affected
• Windows: NOT affected
• iPad with a external keyboard: NOT affected (the virtual keyboard does not work, but this is another issue...)

This seems to be OS related and independent of the browser, because all tested browsers fail in the affected systems, and none of the browsers tested on the non-affected systems fail.

[Faless]

This is due to limitation in web standards.
We would need to focus an hidden input element (IME-like) to make it work (but that could cause focus issues when navigating the canvas).
In 3.3 enabling Experimental Virtual Keyboard Support should allow you to input dead keys in TextEdit(s)/LineEdit(s)

[ofrias]

Thanks for your reply but I don't understand how this is related to web standards. Other keys work OK, and on Windows even dead keys work...

[Faless]

Thanks for your reply but I don't understand how this is related to web standards. Other keys work OK, and on Windows even dead keys work...

Because different OSes uses different methods for handling dead keys, and because composition events are not fired on canvas. https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent

[Faless]

Because different OSes uses different methods for handling dead keys, and because composition events are not fired on canvas.

To expand a bit on this...
When I spent few days on this topic last month, I found out the following inconsistencies:

• Different browsers reported different values of KeyboardEvent.key when the event was fired from a canvas instead of an input/textarea.
• The preferred method for handling IME (which in most OSes includes dead keys) is using the CompositionEvent(s) mentioned above, according to the spec.
• CompositionEvent(s) do not fire on canvas element at all, and I found no way to tell the browser to fire them on the canvas.
• As you might have noticed from the "Editor's Draft" status of the spec, the whole standard is not finalized yet (like for most web standards), and the implementation status varies across browsers and OSes.

That said, if anyone finds a reliable way to detect special keys inserted via dead keys from a canvas, in a way that does not interfere with regular input handling in a game (i.e. allows detecting keydown/keyup correctly), I'll gladly help integrating it in Godot, and it would be certainly a great contribution.

[ofrias]

Maybe you could use KeyboardEvent.code instead of KeyboardEvent.key ?

This is the output when typing Rosalía on Firefox on Ubuntu with a Spanish keyboard layout on this canvas:

Shift, ShiftLeft
R, KeyR + shiftKey
o, KeyO
s, KeyS
a, KeyA
l, KeyL
Dead, Quote
i, KeyI
a, KeyA

While on Chrome on Windows I get this:

Shift, ShiftLeft + shiftKey
R, KeyR + shiftKey
o, KeyO
s, KeyS
a, KeyA
l, KeyL
Dead, Quote
í, KeyI
a, KeyA

This is why the issue does not affect Windows, because in this case KeyboardEvent.key contains the composed output (í instead of i)

Do you have a way to combine several keys (KeyboardEvent.code) into the corresponding output taking into account the user keyboard layout? (note that the KeyboardEvent.code returns the physical key pressed, independently of the keyboard layout).

[Faless]

note that the KeyboardEvent.code returns the physical key pressed, independently of the keyboard layout

Exactly, that's why we can't use code for getting the actual UTF8, we need to use KeyboardEvent.key, but that doesn't seem to report the right value across different browsers/OSs when the target is a canvas.

[Calinou]

Physical scancodes were added to 4.0 by #18020. These are intentionally separate from non-physical scancodes as you ideally want to support both as a game engine.

[Eranot]

Looks like this is still happenning on Godot 4.0 and 4.0.1

[Eranot]

So, I've being studying this problem for some days. Like @Faless said, I don't think there is a way to make canvas use CompositionEvents. I've tried a lot of ways, but none of them worked.

That being said, looks like the option we have is to use a hidden input, as commented by Fabio. I made a little proof of concept here to test this out, and it looks like it works fine, just has to be polished (the code right now is absolutely awful).

The gif below shows how it is working right now.

That being said, does it look like this is a viable option?

[timothyparez]

Not sure whether or not this is related but when I export a project to HTML5
I can no longer input Chinese characters.

• Godot 3.5
• Ubuntu
• Firefox/Edge

(Update: noticed the title was updated to include IME, so yes, it's related)

[LaneSun]

Maybe we can make a web only function like OS.request_web_ime to manully trigger a hidden text input to handle this?

From my point, it's important to make web export able to use IME, but with the current web standard it's not possible to achieve it with any other approach.

[Faless]

There is a pending PR (linked above) implementing this using a hidden element: #79362 .
It needs a rebase, and some more testing.