Can't write accented letters in a RichTextField editor with Firefox

[cfinnberg]

Issue Summary

Hi, I'm just testing a new site I want to build.I can't write accented letters (á,é,í,à,è,ä, ...) in a RichTextField editor with Firefox. I make them pressing first on the "tilde" key (´) and then press the letter you want to write with the accent. But as soon I press this last key, the accented letter I want to write is shown for a fraction of a second and then disappears.

Video of the problem: https://imgur.com/a/zVnWpdi

Steps to Reproduce

1. Start a new project (deault boilerplate)
2. Edit models.py of the homepage (for example) to add a RichTextField. For example from the wagtail documentation: https://docs.wagtail.io/en/stable/getting_started/tutorial.html#extend-the-homepage-model
3. Edit template to show the new RichTextField
4. Migrate and open the admin site in Firefox
5. Try to write accented letters in the RichTextField

One thing to note is that the editor accepts this chars if I just copy/paste them or if I have a key with the letter ready. The problem only arises when using the so called "dead keys".

Not tested all types of fields, but the title of the page accepts the characters just fine.
Tested this with other browser (Chromium) and it works fine.

• I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: yes

Technical details

• Python version: 3.9.6
• Django version: 3.2.5
• Wagtail version: 2.13.4
• Browser version: Firefox 90.0.2 (Linux)

[vupham04]

I can confirm that I am having this bug for RichTextField too. Other fields (for example, title) work fine. I tested it on Firefox, Ubuntu 20.04. I type the accented letters by Ctrl+Shift+u, e , (a number), space. It appears for a bit and then disappears.

[thibaudcolas]

Thank you both for reporting this! I’ve seen IME-style issues like this in a few contexts, but haven’t heard or seen this one before. Please make sure when reporting this to give as much details about your browser and OS as possible, as it’s likely very specific (for example we’ve had people report issues with IceWeasel in the past that weren’t present in vanilla Firefox).

For me on macOS I can’t reproduce, testing in Firefox 95 and Chrome Canary 99 on macOS 12.0.1.

[p0lygun]

working correctly on firefox v98.0.1 (64-bit) and wagtail 2.15.1

[cfinnberg]

Hi, sorry for the delay. Unfortunately same incorrect behavior in Wagtail 3.0 and Firefox 100.0. Characters created in a combination with a dead key are deleted milliseconds after the second key is pressed.

OS: Manjaro Linux. KDE desktop environment. I don't know what more information to add.

[fixgoats]

Stepping through this with an event listener breakpoint on compositionend, this snippet seems to be the problem

onCompositionEnd:function(t){l=!1,f=!1,setTimeout((function(){l||d.resolveComposition(t)}),20)}

Located in draftail.js. Or at least it's what was highlighted before and after the character disappeared.

Using Github's search, there are no results for onCompositionEnd in this repo or draftail's repo, but if anyone can figure out where this comes from that might give a clue.

Should also mention, this issue still persists in Firefox DE 105 with Wagtail 4.0.1 on Arch Linux. So it seems like resolveComposition times out on Firefox but not on Chromium? But the character does get rendered correctly before this is called so I'd consider that a "resolved" composition. So is there some bug in resolveComposition that somehow only affects Firefox and not Chromium?

[Ash-Crow]

As I noted in #9745 , the problem is still present with last versions of Wagtail and Firefox.

• Python version: 3.10.6
• django version: 4.1.3
• wagtail version: 4.1.1
• Browser version: Firefox 107.0