From 16f2a3a18e72d42e071c6a7294f0368859ef9d51 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 13 Jun 2021 19:08:01 +0300
Subject: [PATCH] Emoji Picker: Fix losing focus in Safari (#1157)

---
 src/components/middle/composer/Composer.tsx    | 17 ++++++++---------
 src/components/middle/composer/EmojiButton.tsx |  7 +++++--
 src/components/ui/Menu.tsx                     |  2 +-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/middle/composer/Composer.tsx b/src/components/middle/composer/Composer.tsx
index 0ae2bfa66..226fbd4e9 100644
--- a/src/components/middle/composer/Composer.tsx
+++ b/src/components/middle/composer/Composer.tsx
@@ -315,6 +315,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
     const newHtml = renderText(text, ['escape_html', 'emoji_html', 'br_html'])
       .join('')
       .replace(/\u200b+/g, '\u200b');
+
     if (selection.rangeCount) {
       const selectionRange = selection.getRangeAt(0);
       if (isSelectionInsideInput(selectionRange)) {
@@ -327,17 +328,15 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
         }
         return;
       }
+    }
 
-      setHtml(`${htmlRef.current!}${newHtml}`);
+    setHtml(`${htmlRef.current!}${newHtml}`);
 
-      if (!IS_MOBILE_SCREEN) {
-        // If selection is outside of input, set cursor at the end of input
-        requestAnimationFrame(() => {
-          focusEditableElement(messageInput);
-        });
-      }
-    } else {
-      setHtml(`${htmlRef.current!}${newHtml}`);
+    if (!IS_MOBILE_SCREEN) {
+      // If selection is outside of input, set cursor at the end of input
+      requestAnimationFrame(() => {
+        focusEditableElement(messageInput);
+      });
     }
   }, []);
 
diff --git a/src/components/middle/composer/EmojiButton.tsx b/src/components/middle/composer/EmojiButton.tsx
index 35d259e3f..b089e710b 100644
--- a/src/components/middle/composer/EmojiButton.tsx
+++ b/src/components/middle/composer/EmojiButton.tsx
@@ -11,14 +11,17 @@ type OwnProps = {
 };
 
 const EmojiButton: FC<OwnProps> = ({ emoji, focus, onClick }) => {
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    // Preventing safari from losing focus on Composer MessageInput
+    e.preventDefault();
+
     onClick(emoji.native, emoji.id);
   }, [emoji, onClick]);
 
   return (
     <div
       className={`EmojiButton ${focus ? 'focus' : ''}`}
-      onClick={handleClick}
+      onMouseDown={handleClick}
       title={`:${emoji.names[0]}:`}
     >
       {IS_EMOJI_SUPPORTED
diff --git a/src/components/ui/Menu.tsx b/src/components/ui/Menu.tsx
index 64b5b7f3e..5ce078e65 100644
--- a/src/components/ui/Menu.tsx
+++ b/src/components/ui/Menu.tsx
@@ -79,7 +79,7 @@ const Menu: FC<OwnProps> = ({
     }
   }, [isOpen]);
 
-  const handleKeyDown = useKeyboardListNavigation(menuRef, isOpen, autoClose ? onClose : undefined);
+  const handleKeyDown = useKeyboardListNavigation(menuRef, isOpen, autoClose ? onClose : undefined, undefined, true);
 
   useVirtualBackdrop(
     isOpen,