From 6f0257cd7df8eca257774a0c456af7218896946f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 23 Sep 2019 22:12:25 +0300
Subject: [PATCH] autoscroll post form on typing + some minor improvements

---
 src/components/emoji_input/emoji_input.js     |  4 +++-
 .../post_status_form/post_status_form.js      | 21 ++++++++++++++++++-
 .../post_status_form/post_status_form.vue     |  8 +++----
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 5f90d7f4..25c21403 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -211,10 +211,12 @@ const EmojiInput = {
       this.keepOpen = keepOpen
       this.$emit('input', newValue)
       const position = this.caret + (insertion + spaceAfter + spaceBefore).length
+      if (!keepOpen) {
+        this.input.elm.focus()
+      }
 
       this.$nextTick(function () {
         // Re-focus inputbox after clicking suggestion
-        this.input.elm.focus()
         // Set selection right after the replacement instead of the very end
         this.input.elm.setSelectionRange(position, position)
         this.caret = position
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index d468be76..60cb5a9a 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -249,6 +249,7 @@ const PostStatusForm = {
       return fileTypeService.fileType(fileInfo.mimetype)
     },
     paste (e) {
+      this.resize()
       if (e.clipboardData.files.length > 0) {
         // prevent pasting of file as text
         e.preventDefault()
@@ -267,6 +268,11 @@ const PostStatusForm = {
     fileDrag (e) {
       e.dataTransfer.dropEffect = 'copy'
     },
+    onEmojiInputInput (e) {
+      this.$nextTick(() => {
+        this.resize(this.$refs['textarea'])
+      })
+    },
     resize (e) {
       const target = e.target || e
       if (!(target instanceof window.Element)) { return }
@@ -275,12 +281,25 @@ const PostStatusForm = {
       // Remove "px" at the end of the values
       const vertPadding = Number(topPaddingStr.substr(0, topPaddingStr.length - 2)) +
             Number(bottomPaddingStr.substr(0, bottomPaddingStr.length - 2))
+      const oldValue = Number((/([0-9.]+)px/.exec(target.style.height || '') || [])[1])
       // Auto is needed to make textbox shrink when removing lines
       target.style.height = 'auto'
-      target.style.height = `${target.scrollHeight - vertPadding}px`
+      const newValue = target.scrollHeight - vertPadding
+      target.style.height = `${newValue}px`
+      const scroller = this.$el.closest('.sidebar-scroller') ||
+            this.$el.closest('.post-form-modal-view') ||
+            window
+      const delta = newValue - oldValue || 0
       if (target.value === '') {
         target.style.height = null
+      } else {
+        /* For some reason this doens't _exactly_ work on mobile post form when typing
+         * but it works when adding emojis. Supposedly, removing the "height = auto"
+         * line helps with that but it obviously breaks the autoheight.
+         */
+        scroller.scrollBy(0, delta)
       }
+      this.$refs['emoji-input'].resize()
     },
     showEmojiPicker () {
       this.$refs['textarea'].focus()
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index b50607e6..99ffeef8 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -81,6 +81,7 @@
           enable-emoji-picker
           hide-emoji-button
           enable-sticker-picker
+          @input="onEmojiInputInput"
           @sticker-uploaded="addMediaFile"
           @sticker-upload-failed="uploadFailed"
         >
@@ -95,7 +96,8 @@
             @keyup.ctrl.enter="postStatus(newStatus)"
             @drop="fileDrop"
             @dragover.prevent="fileDrag"
-            @input="resize"
+            @keydown.exact="resize"
+            @compositionupdate="resize"
             @paste="paste"
           />
           <p
@@ -475,10 +477,6 @@
     box-sizing: content-box;
   }
 
-  .form-post-body:focus {
-    min-height: 48px;
-  }
-
   .main-input {
     position: relative;
   }