From 81d86a39fe84794005772a382cbb0f7b3b0c97c7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 8 Oct 2019 21:30:27 +0300
Subject: [PATCH] fixed emoji picker showing up beyond viewport

---
 src/components/emoji_input/emoji_input.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 920fd4bd..c02a9327 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -308,6 +308,17 @@ const EmojiInput = {
       } else {
         scrollerRef.scrollTop = targetScroll
       }
+
+      this.$nextTick(() => {
+        const { offsetHeight } = this.input.elm
+        const { picker } = this.$refs
+        console.log(picker)
+        const pickerBottom = picker.$el.getBoundingClientRect().bottom
+        if (pickerBottom > window.innerHeight) {
+          picker.$el.style.top = 'auto'
+          picker.$el.style.bottom = offsetHeight + 'px'
+        }
+      })
     },
     onTransition (e) {
       this.resize()
@@ -421,11 +432,14 @@ const EmojiInput = {
       this.caret = selectionStart
     },
     resize () {
-      const { panel } = this.$refs
+      const { panel, picker } = this.$refs
       if (!panel) return
       const { offsetHeight, offsetTop } = this.input.elm
-      this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px'
-      this.$refs.picker.$el.style.top = (offsetTop + offsetHeight) + 'px'
+      const offsetBottom = offsetTop + offsetHeight
+
+      panel.style.top = offsetBottom + 'px'
+      picker.$el.style.top = offsetBottom + 'px'
+      picker.$el.style.bottom = 'auto'
     }
   }
 }