From ffe34ee8a1ea2f643b6160603057f89de9cdcb4c Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 25 Sep 2019 10:33:52 +0200
Subject: [PATCH] try to see if this fixes safari back

on of the 2 changes (updating dom async from compositionend,
or ignoring keydown while composing) here has, while fixing chrome,
broken safari.

Don't do the async dom updating for safari if that was it.
---
 .../views/rooms/BasicMessageComposer.js       | 24 +++++++++++++++----
 .../views/rooms/EditMessageComposer.js        |  1 +
 .../views/rooms/SendMessageComposer.js        |  1 +
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js
index ac528f07eb..2e0bc5f395 100644
--- a/src/components/views/rooms/BasicMessageComposer.js
+++ b/src/components/views/rooms/BasicMessageComposer.js
@@ -169,15 +169,31 @@ 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
+        // 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.
-        // do this async though, as modifying the DOM from the compositionend event might confuse the composition.
-        setTimeout(() => {
+
+        // 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"}, true);
-        }, 0);
+        } else {
+            setTimeout(() => {
+                this._onInput({inputType: "insertCompositionText"}, true);
+            }, 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.isComposing);
     }
 
diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js
index 1a7abb45fb..3430e793ac 100644
--- a/src/components/views/rooms/EditMessageComposer.js
+++ b/src/components/views/rooms/EditMessageComposer.js
@@ -127,6 +127,7 @@ export default class EditMessageComposer extends React.Component {
     }
 
     _onKeyDown = (event) => {
+        // ignore any keypress while doing IME compositions
         if (this._editorRef.isComposing(event)) {
             return;
         }
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 6fc53492d3..c8f8ab1293 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -104,6 +104,7 @@ export default class SendMessageComposer extends React.Component {
     };
 
     _onKeyDown = (event) => {
+        // ignore any keypress while doing IME compositions
         if (this._editorRef.isComposing(event)) {
             return;
         }