fixed emoji picker showing up beyond viewport

1 files 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'
     }
   }
 }