From b98939dd0fe0a30b65abcb538dd08a7003f46de6 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 24 Jun 2023 16:27:55 -0400
Subject: [PATCH] fix: Fix some emoji escape logic

---
 src/shared/components/common/emoji-picker.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/common/emoji-picker.tsx b/src/shared/components/common/emoji-picker.tsx
index d8ddf915..1385ce8f 100644
--- a/src/shared/components/common/emoji-picker.tsx
+++ b/src/shared/components/common/emoji-picker.tsx
@@ -12,6 +12,10 @@ interface EmojiPickerState {
   showPicker: boolean;
 }
 
+function closeEmojiMartOnEsc(i, event): void {
+  event.key === "Escape" && i.setState({ showPicker: false });
+}
+
 export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
   private emptyState: EmojiPickerState = {
     showPicker: false,
@@ -24,10 +28,6 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     this.handleEmojiClick = this.handleEmojiClick.bind(this);
   }
 
-  closeEmojiMartOnEsc(i, event) {
-    event.key === "Escape" && i.setState({ showPicker: false });
-  }
-
   render() {
     return (
       <span className="emoji-picker">
@@ -44,7 +44,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
         {this.state.showPicker && (
           <>
             <div className="position-relative" role="dialog">
-              <div className="emoji-picker-container z-3">
+              <div className="emoji-picker-container">
                 <EmojiMart
                   onEmojiClick={this.handleEmojiClick}
                   pickerOptions={{}}
@@ -61,13 +61,17 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     );
   }
 
+  componentWillUnmount() {
+    document.removeEventListener("keyup", e => closeEmojiMartOnEsc(this, e));
+  }
+
   togglePicker(i: EmojiPicker, e: any) {
     e.preventDefault();
     i.setState({ showPicker: !i.state.showPicker });
 
     i.state.showPicker
-      ? document.addEventListener("keyup", e => i.closeEmojiMartOnEsc(i, e))
-      : document.removeEventListener("keyup", e => i.closeEmojiMartOnEsc(i, e));
+      ? document.addEventListener("keyup", e => closeEmojiMartOnEsc(i, e))
+      : document.removeEventListener("keyup", e => closeEmojiMartOnEsc(i, e));
   }
 
   handleEmojiClick(e: any) {