diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js index 110df355fe..c229f64d1a 100644 --- a/src/components/views/rooms/BasicMessageComposer.js +++ b/src/components/views/rooms/BasicMessageComposer.js @@ -169,9 +169,32 @@ export default class BasicMessageEditor extends React.Component { _onCompositionEnd = (event) => { this._isIMEComposing = false; - // some browsers (chromium) don't fire an input event after ending a composition - // so trigger a model update after the composition is done by calling the input handler - this._onInput({inputType: "insertCompositionText"}); + // some browsers (Chrome) don't fire an input event after ending a composition, + // so trigger a model update after the composition is done by calling the input handler. + + // however, modifying the DOM (caused by the editor model update) from the compositionend handler seems + // to confuse the IME in Chrome, likely causing https://github.com/vector-im/riot-web/issues/10913 , + // so we do it async + + // however, doing this async seems to break things in Safari for some reason, so browser sniff. + + const ua = navigator.userAgent.toLowerCase(); + const isSafari = ua.includes('safari/') && !ua.includes('chrome/'); + + if (isSafari) { + this._onInput({inputType: "insertCompositionText"}); + } else { + setTimeout(() => { + this._onInput({inputType: "insertCompositionText"}); + }, 0); + } + } + + isComposing(event) { + // checking the event.isComposing flag just in case any browser out there + // emits events related to the composition after compositionend + // has been fired + return !!(this._isIMEComposing || (event.nativeEvent && event.nativeEvent.isComposing)); } _onPaste = (event) => { diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js index a1d6fa618f..3430e793ac 100644 --- a/src/components/views/rooms/EditMessageComposer.js +++ b/src/components/views/rooms/EditMessageComposer.js @@ -127,6 +127,10 @@ export default class EditMessageComposer extends React.Component { } _onKeyDown = (event) => { + // ignore any keypress while doing IME compositions + if (this._editorRef.isComposing(event)) { + return; + } if (event.metaKey || event.altKey || event.shiftKey) { return; } diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index f6e5830329..c8f8ab1293 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -104,6 +104,10 @@ export default class SendMessageComposer extends React.Component { }; _onKeyDown = (event) => { + // ignore any keypress while doing IME compositions + if (this._editorRef.isComposing(event)) { + return; + } const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey; if (event.key === "Enter" && !hasModifier) { this._sendMessage();