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 { private emptyState: EmojiPickerState = { showPicker: false, @@ -24,10 +28,6 @@ export class EmojiPicker extends Component { this.handleEmojiClick = this.handleEmojiClick.bind(this); } - closeEmojiMartOnEsc(i, event) { - event.key === "Escape" && i.setState({ showPicker: false }); - } - render() { return ( @@ -44,7 +44,7 @@ export class EmojiPicker extends Component { {this.state.showPicker && ( <>
-
+
{ ); } + 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) {