From c3f829eb68143e582b321e1f87b967594c4dbbd7 Mon Sep 17 00:00:00 2001
From: David <dmgf2008@hotmail.com>
Date: Thu, 17 Nov 2022 14:45:32 -0800
Subject: [PATCH] Allow using mouse wheel to navigate through the emoji tabs

---
 src/components/emoji_picker/emoji_picker.js  | 4 ++++
 src/components/emoji_picker/emoji_picker.vue | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 13533bb0..6617a937 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -62,6 +62,10 @@ const EmojiPicker = {
       this.scrolledGroup(target)
       this.triggerLoadMore(target)
     },
+    onWheel (e) {
+      e.preventDefault()
+      this.$refs['emoji-tabs'].scrollBy(e.deltaY, 0)
+    },
     highlight (key) {
       this.setShowStickers(false)
       this.activeGroup = key
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index a629c9ad..00ffb9d2 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="emoji-picker panel panel-default panel-body">
     <div class="heading">
-      <span class="emoji-tabs">
+      <span
+        class="emoji-tabs"
+        @wheel="onWheel"
+        ref="emoji-tabs"
+      >
         <span
           v-for="group in emojis"
           :key="group.id"