Merge branch 'fix/stabilize-input-bux' into 'develop'

fix: stabilize post status form input box

See merge request pleroma/pleroma-fe!1191

1 files changed, 17 insertions, 5 deletions

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 1c0accac..6bceed90 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -27,6 +27,11 @@ const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
   return mentions.length > 0 ? mentions.join(' ') + ' ' : ''
 }
 
+// Converts a string with px to a number like '2px' -> 2
+const pxStringToNumber = (str) => {
+  return Number(str.substring(0, str.length - 2))
+}
+
 const PostStatusForm = {
   props: [
     'replyTo',
@@ -423,7 +428,7 @@ const PostStatusForm = {
        * scroll is different for `Window` and `Element`s
        */
       const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
-      const bottomBottomPadding = Number(bottomBottomPaddingStr.substring(0, bottomBottomPaddingStr.length - 2))
+      const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)
 
       const scrollerRef = this.$el.closest('.sidebar-scroller') ||
             this.$el.closest('.post-form-modal-view') ||
@@ -432,10 +437,12 @@ const PostStatusForm = {
       // Getting info about padding we have to account for, removing 'px' part
       const topPaddingStr = window.getComputedStyle(target)['padding-top']
       const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom']
-      const topPadding = Number(topPaddingStr.substring(0, topPaddingStr.length - 2))
-      const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2))
+      const topPadding = pxStringToNumber(topPaddingStr)
+      const bottomPadding = pxStringToNumber(bottomPaddingStr)
       const vertPadding = topPadding + bottomPadding
 
+      const oldHeight = pxStringToNumber(target.style.height)
+
       /* Explanation:
        *
        * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
@@ -464,8 +471,13 @@ const PostStatusForm = {
 
       // BEGIN content size update
       target.style.height = 'auto'
-      const heightWithoutPadding = target.scrollHeight - vertPadding
-      const newHeight = this.maxHeight ? Math.min(heightWithoutPadding, this.maxHeight) : heightWithoutPadding
+      const heightWithoutPadding = Math.floor(target.scrollHeight - vertPadding)
+      let newHeight = this.maxHeight ? Math.min(heightWithoutPadding, this.maxHeight) : heightWithoutPadding
+      // This is a bit of a hack to combat target.scrollHeight being different on every other input
+      // on some browsers for whatever reason. Don't change the height if difference is 1px or less.
+      if (Math.abs(newHeight - oldHeight) <= 1) {
+        newHeight = oldHeight
+      }
       target.style.height = `${newHeight}px`
       this.$emit('resize', newHeight)
       // END content size update