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" />
() 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( } ) -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 +})