fix: Enhance AutoExpandTextArea width handling and add minimum width … · NativeMindBrowser/NativeMindExtension@0d9e92a
@@ -45,29 +45,54 @@ if (!CSS.supports('field-sizing', 'content')) {
4545 const textareaBounding = useElementBounding(textareaRef)
4646 const getSizingStyles = () => {
4747 const width = textareaRef.value?.offsetWidth
48- const baseStyleCss = `position: absolute; top: 100px; left: 100px; opacity: 1; max-height: 0; overflow-wrap: anywhere; width: ${width}px; scrollbar-width: none`
48+ const widthRule = typeof width === 'number' && width > 0 ? `width: ${width}px;` : ''
49+ const baseStyleCss = `position: absolute; top: 100px; left: 100px; opacity: 1; max-height: 0; overflow-wrap: anywhere; scrollbar-width: none; ${widthRule}`
4950 if (!textareaRef.value) return baseStyleCss
5051 const el = textareaRef.value
5152 const styles = window.getComputedStyle(el)
5253 const sizingStyles = ['width', 'padding-left', 'padding-right', 'border-left', 'border-right', 'box-sizing', 'font-family', 'font-size']
53- return sizingStyles.filter((prop) => !!styles.getPropertyValue(prop)).map((prop) => `${prop}: ${styles.getPropertyValue(prop)}`).join('; ') + ';' + baseStyleCss
54+ return sizingStyles
55+ .filter((prop) => !!styles.getPropertyValue(prop))
56+ .map((prop) => `${prop}: ${styles.getPropertyValue(prop)}`)
57+ .join('; ') + ';' + baseStyleCss
5458 }
5559 const { element: measureEl } = useTempElement('textarea', { attributes: { style: getSizingStyles(), id: `nm-textarea-measure-${generateRandomId()}` } })
566057- watch(() => [textareaBounding.width.value], ([width]) => {
61+ const syncMeasureStyles = (width?: number) => {
5862 measureEl.style.cssText = getSizingStyles()
59- measureEl.style.width = `${width}px`
60- })
63+ if (typeof width === 'number' && width > 0) {
64+ measureEl.style.width = `${width}px`
65+ }
66+ }
616762- watch(inputValue, async (v) => {
63- measureEl.value = v ?? ''
64- if (!textareaRef.value) return
68+ const resizeTextarea = () => {
6569 const textarea = textareaRef.value
70+ if (!textarea) return
71+ const width = textareaBounding.width.value
72+ if (width <= 0) return
73+ syncMeasureStyles(width)
74+ measureEl.value = inputValue.value ?? ''
6675 // force a reflow to ensure the height is recalculated
6776 const _ = measureEl.offsetHeight
6877 const scrollHeight = measureEl.scrollHeight
6978 const height = Math.max(props.minHeight || 0, scrollHeight)
70- textarea.style.height = `${height}px` // Set height to scrollHeight to expand
71- })
79+ textarea.style.height = `${height}px`
80+ }
81+82+ watch(
83+ () => textareaBounding.width.value,
84+ () => {
85+ resizeTextarea()
86+ },
87+ { immediate: true, flush: 'post' },
88+ )
89+90+ watch(
91+ inputValue,
92+ () => {
93+ resizeTextarea()
94+ },
95+ { immediate: true, flush: 'post' },
96+ )
7297}
7398</script>