Close picker (#90)

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -1,5 +1,5 @@
 import { Picker } from "emoji-mart";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 
 import { useLow } from "../../contexts/narrowProvider";
@@ -22,6 +22,13 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
   const [inputHeight, setInputHeight] = useState(40);
   const [imageUint, setImageUint] = useState<undefined | Uint8Array>(undefined);
 
+  useEffect(() => {
+    window.addEventListener("click", () => setShowEmoji(false));
+    return () => {
+      window.removeEventListener("click", () => setShowEmoji(false));
+    };
+  }, []);
+
   const image = useMemo(
     () => (imageUint ? uintToImgUrl(imageUint) : ""),
     [imageUint]
@@ -119,7 +126,12 @@ export function ChatInput({ theme, addMessage }: ChatInputProps) {
           onKeyPress={onInputKeyPress}
         />
         <InputButtons>
-          <ChatButton onClick={() => setShowEmoji(!showEmoji)}>
+          <ChatButton
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowEmoji(!showEmoji);
+            }}
+          >
             <EmojiIcon isActive={showEmoji} />
           </ChatButton>
           <ChatButton>