Make emoji picker work with vue3

src/components/emoji_picker/emoji_picker.js

@@ -83,7 +83,9 @@ const EmojiPicker = {
       keepOpen: false,
       customEmojiTimeout: null,
       // Lazy-load only after the first time `showing` becomes true.
-      contentLoaded: false
+      contentLoaded: false,
+      groupRefs: {},
+      emojiRefs: {}
     }
   },
   components: {
@@ -92,6 +94,12 @@ const EmojiPicker = {
     StillImage
   },
   methods: {
+    setGroupRef (name) {
+      return el => { this.groupRefs[name] = el }
+    },
+    setEmojiRef (name) {
+      return el => { this.emojiRefs[name] = el }
+    },
     onStickerUploaded (e) {
       this.$emit('sticker-uploaded', e)
     },
@@ -111,8 +119,8 @@ const EmojiPicker = {
       const top = target.scrollTop + 5
       this.$nextTick(() => {
         this.allEmojiGroups.forEach(group => {
-          const ref = this.$refs['group-' + group.id]
-          if (ref[0].offsetTop <= top) {
+          const ref = this.groupRefs['group-' + group.id]
+          if (ref && ref.offsetTop <= top) {
             this.activeGroup = group.id
           }
         })
@@ -121,7 +129,7 @@ const EmojiPicker = {
     },
     scrollHeader () {
       // Scroll the active tab's header into view
-      const headerRef = this.$refs['group-header-' + this.activeGroup][0]
+      const headerRef = this.groupRefs['group-header-' + this.activeGroup]
       const left = headerRef.offsetLeft
       const right = left + headerRef.offsetWidth
       const headerCont = this.$refs.header
@@ -137,7 +145,7 @@ const EmojiPicker = {
       }
     },
     highlight (key) {
-      const ref = this.$refs['group-' + key]
+      const ref = this.groupRefs['group-' + key]
       const top = ref.offsetTop
       this.setShowStickers(false)
       this.activeGroup = key
@@ -168,7 +176,8 @@ const EmojiPicker = {
       this.$nextTick(() => {
         this.$lozad = lozad('.still-image.emoji-picker-emoji', {
           load: el => {
-            const vn = el.__vue__
+            const name = el.getAttribute('data-emoji-name')
+            const vn = this.emojiRefs[name]
             if (!vn) {
               return
             }

src/components/emoji_picker/emoji_picker.vue

@@ -9,7 +9,7 @@
       >
         <span
           v-for="group in filteredEmojiGroups"
-          :ref="'group-header-' + group.id"
+          :ref="setGroupRef('group-header-' + group.id)"
           :key="group.id"
           class="emoji-tabs-item"
           :class="{
@@ -79,7 +79,7 @@
             class="emoji-group"
           >
             <h6
-              :ref="'group-' + group.id"
+              :ref="setGroupRef('group-' + group.id)"
               class="emoji-group-title"
             >
               {{ group.text }}
@@ -95,10 +95,12 @@
               <still-image
                 v-else
                 class="emoji-picker-emoji"
+                :ref="setEmojiRef(group.id + emoji.displayText)"
                 :data-src="emoji.imageUrl"
+                :data-emoji-name="group.id + emoji.displayText"
               />
             </span>
-            <span :ref="'group-end-' + group.id" />
+            <span :ref="setGroupRef('group-end-' + group.id)" />
           </div>
         </div>
         <div class="keep-open">