Fix message input emoji focus close (#4727)

ts/components/CompositionArea.tsx

@@ -260,6 +260,7 @@ export const CompositionArea = ({
         i18n={i18n}
         doSend={handleForceSend}
         onPickEmoji={insertEmoji}
+        onClose={focusInput}
         recentEmojis={recentEmojis}
         skinTone={skinTone}
         onSetSkinTone={onSetSkinTone}

ts/components/emoji/EmojiButton.tsx

@@ -11,6 +11,7 @@ import { LocalizerType } from '../../types/Util';
 
 export type OwnProps = {
   readonly i18n: LocalizerType;
+  readonly onClose?: () => unknown;
 };
 
 export type Props = OwnProps &
@@ -23,6 +24,7 @@ export const EmojiButton = React.memo(
   ({
     i18n,
     doSend,
+    onClose,
     onPickEmoji,
     skinTone,
     onSetSkinTone,
@@ -43,7 +45,10 @@ export const EmojiButton = React.memo(
 
     const handleClose = React.useCallback(() => {
       setOpen(false);
-    }, [setOpen]);
+      if (onClose) {
+        onClose();
+      }
+    }, [setOpen, onClose]);
 
     // Create popper root and handle outside clicks
     React.useEffect(() => {
@@ -51,9 +56,11 @@ export const EmojiButton = React.memo(
         const root = document.createElement('div');
         setPopperRoot(root);
         document.body.appendChild(root);
-        const handleOutsideClick = ({ target }: MouseEvent) => {
-          if (!root.contains(target as Node)) {
-            setOpen(false);
+        const handleOutsideClick = (event: MouseEvent) => {
+          if (!root.contains(event.target as Node)) {
+            handleClose();
+            event.stopPropagation();
+            event.preventDefault();
           }
         };
         document.addEventListener('click', handleOutsideClick);
@@ -66,7 +73,7 @@ export const EmojiButton = React.memo(
       }
 
       return noop;
-    }, [open, setOpen, setPopperRoot]);
+    }, [open, setOpen, setPopperRoot, handleClose]);
 
     // Install keyboard shortcut to open emoji picker
     React.useEffect(() => {

ts/components/emoji/EmojiPicker.tsx

@@ -20,7 +20,6 @@ import {
 } from 'lodash';
 import { Emoji } from './Emoji';
 import { dataByCategory, search } from './lib';
-import { useRestoreFocus } from '../../util/hooks';
 import { LocalizerType } from '../../types/Util';
 
 export type EmojiPickDataType = {
@@ -75,7 +74,6 @@ export const EmojiPicker = React.memo(
       }: Props,
       ref
     ) => {
-      const focusRef = React.useRef<HTMLButtonElement>(null);
       const [firstRecent] = React.useState(recentEmojis);
       const [selectedCategory, setSelectedCategory] = React.useState(
         categories[0]
@@ -188,9 +186,6 @@ export const EmojiPicker = React.memo(
         };
       }, [onClose, searchMode]);
 
-      // Focus after initial render, restore focus on teardown
-      useRestoreFocus(focusRef);
-
       const [, ...renderableCategories] = categories;
 
       const emojiGrid = React.useMemo(() => {
@@ -307,7 +302,6 @@ export const EmojiPicker = React.memo(
           <header className="module-emoji-picker__header">
             <button
               type="button"
-              ref={focusRef}
               onClick={handleToggleSearch}
               title={i18n('EmojiPicker--search-placeholder')}
               className={classNames(