delay closeEmojiPicker event listener (#675)

* delay closeEmojiPicker event listener

* 3.5.2 changelog

* remove delay

* add comment to explain setTimeout

* adjust logic

* changelog

Co-authored-by: Dan Carbonell <[email protected]>
Co-authored-by: Vishal Narkhede <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -1,10 +1,17 @@
 # Changelog
 
+## [3.5.2](https://github.com/GetStream/stream-chat-react/releases/tag/v3.5.2) 2021-01-21
+
+### Fix
+
+- Handle emoji picker event listener race condition [#675](https://github.com/GetStream/stream-chat-react/pull/675)
+- Adjust style for only emoji messages [#676](https://github.com/GetStream/stream-chat-react/pull/676)
+
 ## [3.5.1](https://github.com/GetStream/stream-chat-react/releases/tag/v3.5.1) 2021-01-19
 
 ### Fix
 
-- Upload PSD attachments as file [#67](https://github.com/GetStream/stream-chat-react/pull/673)
+- Upload PSD attachments as file [#673](https://github.com/GetStream/stream-chat-react/pull/673)
 
 ### Chore
 

src/components/MessageInput/hooks/messageInput.js

@@ -343,19 +343,27 @@ export default function useMessageInput(props) {
           type: 'setEmojiPickerIsOpen',
           value: false,
         });
-        document.removeEventListener('click', closeEmojiPicker, false);
       }
     },
     [emojiPickerRef],
   );
 
-  const openEmojiPicker = useCallback(() => {
+  const openEmojiPicker = useCallback((event) => {
     dispatch({
       type: 'setEmojiPickerIsOpen',
       value: true,
     });
-    document.addEventListener('click', closeEmojiPicker, false);
-  }, [closeEmojiPicker]);
+
+    // Prevent event from bubbling to document, so the close handler is never called for this event
+    event.stopPropagation();
+  }, []);
+
+  useEffect(() => {
+    if (state.emojiPickerIsOpen) {
+      document.addEventListener('click', closeEmojiPicker, false);
+    }
+    return () => document.removeEventListener('click', closeEmojiPicker, false);
+  }, [closeEmojiPicker, state.emojiPickerIsOpen]);
 
   const onSelectEmoji = useCallback((emoji) => insertText(emoji.native), [
     insertText,