From 9cf0a4adc4af8f66c96f82b2035a869f230c2ba0 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Mon, 3 Feb 2025 16:22:35 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20textarea=20=E3=81=AE=20he?=
 =?UTF-8?q?ight=20=E3=81=8C=20max-height=20=E3=82=92=E8=B6=85=E3=81=88?=
 =?UTF-8?q?=E3=81=9F=E6=99=82=E3=81=AB=E3=81=AE=E3=81=BF=E6=8B=A1=E5=BC=B5?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=8C=E8=A1=A8=E7=A4=BA=E3=81=95?=
 =?UTF-8?q?=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E3=82=92=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MessageInput/MessageInputTextArea.vue     | 43 +++++++++----------
 src/components/UI/TextareaAutosize.vue        |  4 ++
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
index 8d02c6ca2..d1124ed65 100644
--- a/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
+++ b/src/components/Main/MainView/MessageInput/MessageInputTextArea.vue
@@ -22,6 +22,7 @@
       @focus="onFocus"
       @blur="onBlur"
       @paste="onPaste"
+      @autosize-updated="updateShowIsInputTextareaExpandButtonVisibility"
     />
     <div :class="$style.over" />
     <dropdown-suggester
@@ -78,6 +79,7 @@ const emit = defineEmits<{
   (e: 'postMessage'): void
   (e: 'modifierKeyDown'): void
   (e: 'modifierKeyUp'): void
+  (e: 'autosize-updated'): void
 }>()
 
 const firefoxFlag = isFirefox()
@@ -143,16 +145,19 @@ const onBlur = () => {
   emit('blur')
 }
 
+const textAreaAutoSizeMaxHeightShrunk = computed(() =>
+  isMobile.value ? 70 : 160
+)
+
 const textAreaAutoSizeMaxHeight = computed(() => {
   if (props.isMaxHeightNone) {
     return 'none'
   }
-
-  if (isMobile.value) {
-    return props.isInputTextAreaExpanded ? '140px' : '70px'
-  } else {
-    return props.isInputTextAreaExpanded ? '320px' : '160px'
-  }
+  return (
+    (props.isInputTextAreaExpanded
+      ? textAreaAutoSizeMaxHeightShrunk.value * 2
+      : textAreaAutoSizeMaxHeightShrunk.value) + 'px'
+  )
 })
 
 const scollbarWidth = getScrollbarWidth()
@@ -168,26 +173,18 @@ const showIsInputTextAreaExpandedButton = defineModel<boolean>(
   }
 )
 
-const updateTextareaExpandButtonVisibility = () => {
-  if (textareaRef.value) {
-    const height = textareaRef.value.scrollHeight
-    if (isMobile.value) {
-      showIsInputTextAreaExpandedButton.value = height >= 70
-    } else {
-      showIsInputTextAreaExpandedButton.value = height >= 160
+const updateShowIsInputTextareaExpandButtonVisibility = () => {
+  nextTick(() => {
+    if (textareaRef.value) {
+      showIsInputTextAreaExpandedButton.value =
+        textareaRef.value.scrollHeight > textAreaAutoSizeMaxHeightShrunk.value
     }
-  }
+  })
 }
 
-watch(
-  value,
-  () => {
-    nextTick(() => {
-      updateTextareaExpandButtonVisibility()
-    })
-  },
-  { immediate: true }
-)
+watch([value], updateShowIsInputTextareaExpandButtonVisibility, {
+  immediate: true
+})
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/UI/TextareaAutosize.vue b/src/components/UI/TextareaAutosize.vue
index cfaeb041c..1d3785c0c 100644
--- a/src/components/UI/TextareaAutosize.vue
+++ b/src/components/UI/TextareaAutosize.vue
@@ -39,6 +39,7 @@ const emit = defineEmits<{
   (e: 'focus'): void
   (e: 'blur'): void
   (e: 'paste', _val: ClipboardEvent): void
+  (e: 'autosize-updated'): void
 }>()
 
 const { value, onInput } = useTextModelSyncer(props, emit)
@@ -52,6 +53,9 @@ const focus = () => {
 onMounted(() => {
   if (textareaEle.value) {
     autosize(textareaEle.value)
+    textareaEle.value.addEventListener('autosize:resized', () => {
+      emit('autosize-updated')
+    })
   }
 })
 watch([toRef(props, 'modelValue'), toRef(props, 'maxHeight')], async () => {