Emoji Picker: Fix losing focus in Safari (#1157)

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 (!IS_MOBILE_SCREEN) {
-        // If selection is outside of input, set cursor at the end of input
+      // If selection is outside of input, set cursor at the end of input
-        requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
-          focusEditableElement(messageInput);
+        focusEditableElement(messageInput);
-        });
+      });
-      }
-    } else {
-      setHtml(`${htmlRef.current!}${newHtml}`);
     }
   }, []);
 

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

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,