Fix emoji selector on touchscreen

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/status-reaction-wrapper.tsx

@@ -112,6 +112,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
             referenceElement={referenceElement}
             onReact={handleReact}
             visible={visible}
+            onClose={() => setVisible(false)}
           />
         </Portal>
       )}

app/soapbox/components/ui/emoji-selector/emoji-selector.tsx

@@ -3,10 +3,12 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { usePopper } from 'react-popper';
 
-import { Emoji, HStack, IconButton } from 'soapbox/components/ui';
+import { Emoji as EmojiComponent, HStack, IconButton } from 'soapbox/components/ui';
 import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
+import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
+
 interface IEmojiButton {
   /** Unicode emoji character. */
   emoji: string
@@ -29,7 +31,7 @@ const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabInd
 
   return (
     <button className={clsx(className)} onClick={handleClick} tabIndex={tabIndex}>
-      <Emoji className='h-6 w-6 duration-100 hover:scale-110' emoji={emoji} />
+      <EmojiComponent className='h-6 w-6 duration-100 hover:scale-110' emoji={emoji} />
     </button>
   );
 };
@@ -61,7 +63,6 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
 }): JSX.Element => {
   const soapboxConfig = useSoapboxConfig();
 
-
   const [expanded, setExpanded] = useState(false);
 
   // `useRef` won't trigger a re-render, while `useState` does.
@@ -74,6 +75,8 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
     }
 
     if (document.querySelector('em-emoji-picker')) {
+      event.preventDefault();
+      event.stopPropagation();
       return setExpanded(false);
     }
 
@@ -98,6 +101,10 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
     setExpanded(true);
   };
 
+  const handlePickEmoji = (emoji: Emoji) => {
+    onReact((emoji as NativeEmoji).native);
+  };
+
   useEffect(() => () => {
     document.body.style.overflow = '';
   }, []);
@@ -112,7 +119,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [referenceElement]);
+  }, [referenceElement, popperElement]);
 
   useEffect(() => {
     if (visible && update) {
@@ -142,6 +149,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
           setVisible={setExpanded}
           update={update}
           withCustom={false}
+          onPickEmoji={handlePickEmoji}
         />
       ) : (
         <HStack

app/soapbox/features/emoji/search.ts

@@ -40,7 +40,6 @@ export const addCustomToPool = (customEmojis: any[]) => {
 const search = (str: string, { maxResults = 5, custom }: searchOptions = {}, custom_emojis?: any): Emoji[] => {
   return index.search(str, maxResults)
     .flatMap((id: string) => {
-      console.log(id);
       if (id[0] === 'c') {
         const { shortcode, static_url } = custom_emojis.get((id as string).slice(1)).toJS();