From 46618e2dd0d89fd3f26e3cc41b9c952efb2b06d8 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Wed, 20 Oct 2021 16:15:18 +0200
Subject: [PATCH] Close picker (#90)

---
 .../react-chat/src/components/Chat/ChatInput.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx
index 22370dd..41e7e49 100644
--- a/packages/react-chat/src/components/Chat/ChatInput.tsx
+++ b/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>