From 7d41179b83f6a3b423b0dbf3fdf20cfd2de1b302 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 11 Jul 2023 20:56:40 -0700
Subject: [PATCH] feat: :sparkles: don't close emoji picker if shift is held
 down, like Discord

https://snug.moe/notes/9h1p04dqytz2qfsz
---
 .../src/components/MkEmojiPickerDialog.vue    | 39 ++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/MkEmojiPickerDialog.vue b/packages/client/src/components/MkEmojiPickerDialog.vue
index fcd2f26a3c..95000b353a 100644
--- a/packages/client/src/components/MkEmojiPickerDialog.vue
+++ b/packages/client/src/components/MkEmojiPickerDialog.vue
@@ -12,7 +12,7 @@
 		:transparent-bg="true"
 		:manual-showing="manualShowing"
 		:src="src"
-		@click="modal?.close()"
+		@click="checkForShift"
 		@opening="opening"
 		@close="emit('close')"
 		@closed="emit('closed')"
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import MkModal from "@/components/MkModal.vue";
 import MkEmojiPicker from "@/components/MkEmojiPicker.vue";
 import { defaultStore } from "@/store";
@@ -58,20 +58,49 @@ const emit = defineEmits<{
 
 const modal = ref<InstanceType<typeof MkModal>>();
 const picker = ref<InstanceType<typeof MkEmojiPicker>>();
+const isShiftKeyPressed = ref(false);
 
-function chosen(emoji: any) {
+const keydownHandler = (e) => {
+	if (e.key === "Shift") {
+		isShiftKeyPressed.value = true;
+	}
+};
+
+const keyupHandler = (e) => {
+	if (e.key === "Shift") {
+		isShiftKeyPressed.value = false;
+	}
+};
+
+function checkForShift(ev?: MouseEvent) {
+	if (!isShiftKeyPressed.value) {
+		modal.value?.close(ev);
+	}
+}
+
+function chosen(emoji: any, ev: MouseEvent) {
 	emit("done", emoji);
-	modal.value?.close();
+	checkForShift(ev);
 }
 
 function opening() {
 	try {
 		picker.value?.reset();
 	} catch (e) {
-		console.error(`Something's wrong with restting the emoji picker: ${e}`);
+		console.error("Something's wrong with resetting the emoji picker", e);
 	}
 	picker.value?.focus();
 }
+
+onMounted(() => {
+	window.addEventListener("keydown", keydownHandler);
+	window.addEventListener("keyup", keyupHandler);
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener("keydown", keydownHandler);
+	window.removeEventListener("keyup", keyupHandler);
+});
 </script>
 
 <style lang="scss" scoped>