react: Incorrect data in compositionend event when typing Korean on IE11
To reproduce:
- In IE11 (on Win7 or Win10) go to https://jsfiddle.net/robbertbrak/84v837e9/164/
- Open the Developer console.
- Switch to the Microsoft Korean IME (standard settings) and switch to Korean input.
- Put the cursor in the contenteditable div and type
여름.(on a QWERTY keyboard this is typed asdufma.). - Do the same for the input field.
Result: in the developer console a list of composition events and the contents of the data attribute is logged. However, the data of the first
compositionendevent is wrong. It should be 여, not 여르. See screenshot below.
You can see that this is wrong by trying out the same thing on https://dvcs.w3.org/hg/d4e/raw-file/tip/key-event-test.html. As seen in the screenshot below, a plain (non-React) input field emits a compositionend event with the proper data.
This occurs with the latest version of React, but I have also seen this behaviour in older versions. An example of where this causes problems is in Draft JS.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 18 (7 by maintainers)
Commits related to this issue
- Fix incorrect data in compositionend event with Korean IME on IE (#10217) * Add isUsingKoreanIME function to check if a composition event was triggered by Korean IME * Add Korean IME check alongside... — committed to crux153/react by crux153 6 years ago
- Fix incorrect data in compositionend event with Korean IME on IE11 (#10217) * Add isUsingKoreanIME function to check if a composition event was triggered by Korean IME * Add Korean IME check alongsi... — committed to crux153/react by crux153 6 years ago
- Fix incorrect data in compositionend event with Korean IME on IE11 (#10217) (#12563) * Add isUsingKoreanIME function to check if a composition event was triggered by Korean IME * Add Korean IME ch... — committed to facebook/react by crux153 6 years ago
Each browser provides rather different events depending on the browser/OS/keyboard combo. The only way to test this properly is to get a real copy of IE11 and set your keyboard input to the proper language. (For example, in the past I have broken Korean input on Chrome Windows while trying to fix Korean input on Chrome Mac. You would think they’re the same but they are not.)
Merged https://github.com/facebook/react/pull/12563 into master which should fix this. Will be out in the next release.
It would be great if there was some way to simulate those in DOM fixtures so that we don’t have to type with special layouts.
It’s a great resource! We have a handful of open issues related to composition events. It’s something we need to look into more, and a good candidate for our DOM fixtures, so thanks for bringing this to our attention!