fix: Resizable textarea height issue

2023-11-15 11:42:05 +05:30
3 changed files with 15 additions and 6 deletions
@@ -4,6 +4,7 @@
      v-model="articleTitle"
      type="text"
      rows="1"
+      :min-height="6"
      class="article-heading"
      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
      @focus="onFocus"
@@ -19,6 +19,7 @@
      v-model="greetingsMessage"
      rows="4"
      type="text"
+      :min-height="6"
      class="greetings--textarea"
      :label="label"
      :placeholder="placeholder"
@@ -1,6 +1,7 @@
 <template>
  <textarea
    ref="textarea"
+    :style="{ height: textareaHeight }"
    :placeholder="placeholder"
    :value="value"
    @input="onInput"
@@ -18,6 +19,7 @@ import {
 } from 'dashboard/helper/editorHelper';

 const TYPING_INDICATOR_IDLE_TIME = 4000;
+const PIXELS_PER_REM = 16;
 export default {
  props: {
    placeholder: {
@@ -50,6 +52,7 @@ export default {
  data() {
    return {
      idleTimer: null,
+      textareaHeight: `${this.minHeight * PIXELS_PER_REM}px`,
    };
  },
  computed: {
@@ -91,12 +94,16 @@ export default {
  },
  methods: {
    resizeTextarea() {
-      this.$el.style.height = 'auto';
-      if (!this.value) {
-        this.$el.style.height = `${this.minHeight}rem`;
-      } else {
-        this.$el.style.height = `${this.$el.scrollHeight}px`;
-      }
+      const textarea = this.$refs.textarea;
+      if (!textarea || !this.value) return;
+      // Reset the height to the minimum first to allow shrinking
+      const minHeightPx = this.minHeight * PIXELS_PER_REM;
+      this.textareaHeight = `${minHeightPx}px`;
+
+      this.$nextTick(() => {
+        const newHeight = Math.max(textarea.scrollHeight, minHeightPx);
+        this.textareaHeight = `${newHeight}px`; // Update the height
+      });
    },
    // The toggleSignatureInEditor gets the new value from the
    // watcher, this means that if the value is true, the signature