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 check alongside useFallbackCompositionData and disable fallback mode with Korean IME
Crux committed
Jun 15, 2018 at 00:35 UTC
2e757790751ab8d165fc4df37e90a59d914c4527
1 file changed
+18
-2
packages/react-dom/src/events/BeforeInputEventPlugin.js
+18
-2
@@ -200,6 +200,20 @@ function getDataFromCustomEvent(nativeEvent) {
200
return null;
201
}
202
203
+/**
204
+ * Check if a composition event was triggered by Korean IME.
205
+ * Our fallback mode does not work well with IE's Korean IME,
206
+ * so just use native composition events when Korean IME is used.
207
+ * Although CompositionEvent.locale property is deprecated,
208
+ * it is available in IE, where our fallback mode is enabled.
209
+ *
210
+ * @param {object} nativeEvent
211
+ * @return {boolean}
212
+ */
213
+function isUsingKoreanIME(nativeEvent) {
214
+ return nativeEvent.locale === 'ko';
215
+}
216
+
217
// Track the current IME composition status, if any.
218
let isComposing = false;
219
@@ -229,7 +243,7 @@ function extractCompositionEvent(
243
return null;
244
}
245
232
- if (useFallbackCompositionData) {
246
+ if (useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)) {
247
// The current composition is stored statically and must not be
248
// overwritten while composition continues.
249
if (!isComposing && eventType === eventTypes.compositionStart) {
@@ -378,7 +392,9 @@ function getFallbackBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {
392
}
393
return null;
394
case TOP_COMPOSITION_END:
381
- return useFallbackCompositionData ? null : nativeEvent.data;
395
+ return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)
396
+ ? null
397
+ : nativeEvent.data;
398
default:
399
return null;
400
}