🐛 fix: textarea の height が max-height を超えた時にのみ拡張ボタンが表示されるように条件を改善

Author: reiroop

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,24 +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()
-    })
-  },
+  [value],
+  updateShowIsInputTextareaExpandButtonVisibility,
   { immediate: true }
 )
 </script>

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 () => {