diff --git a/packages/components/textarea/__tests__/__snapshots__/textarea.spec.ts.snap b/packages/components/textarea/__tests__/__snapshots__/textarea.spec.ts.snap
index d4d9b3416..8757ff460 100644
--- a/packages/components/textarea/__tests__/__snapshots__/textarea.spec.ts.snap
+++ b/packages/components/textarea/__tests__/__snapshots__/textarea.spec.ts.snap
@@ -2,10 +2,10 @@
exports[`Textarea > render work 1`] = `""`;
-exports[`Textarea > resize and autoRows work 1`] = `""`;
+exports[`Textarea > resize and autoRows work 1`] = `""`;
-exports[`Textarea > resize and autoRows work 2`] = `""`;
+exports[`Textarea > resize and autoRows work 2`] = `""`;
-exports[`Textarea > resize and autoRows work 3`] = `""`;
+exports[`Textarea > resize and autoRows work 3`] = `""`;
-exports[`Textarea > resize and autoRows work 4`] = `""`;
+exports[`Textarea > resize and autoRows work 4`] = `""`;
diff --git a/packages/components/textarea/src/composables/useAutoRows.ts b/packages/components/textarea/src/composables/useAutoRows.ts
index 999ff20fa..770463a18 100644
--- a/packages/components/textarea/src/composables/useAutoRows.ts
+++ b/packages/components/textarea/src/composables/useAutoRows.ts
@@ -20,7 +20,7 @@ import { useLineHeight } from './useLineHeight'
export interface AutoRowsContext {
resizeToFitContent: (force?: boolean) => void
- lineHeight: ComputedRef
+ lineHeight: Ref
boxSizingData: ComputedRef
}
diff --git a/packages/components/textarea/src/composables/useLineHeight.ts b/packages/components/textarea/src/composables/useLineHeight.ts
index 5e01167a2..ed1f8b8a4 100644
--- a/packages/components/textarea/src/composables/useLineHeight.ts
+++ b/packages/components/textarea/src/composables/useLineHeight.ts
@@ -5,7 +5,7 @@
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
*/
-import { type ComputedRef, type Ref, computed } from 'vue'
+import { type Ref, customRef, watch } from 'vue'
import { getBoxSizingData } from '../utils/getBoxSizingData'
import { measureTextarea } from '../utils/measureTextarea'
@@ -16,8 +16,30 @@ import { measureTextarea } from '../utils/measureTextarea'
* @param textareaRef reference of a textarea element
* @return ComputedRef of line height
*/
-export function useLineHeight(textareaRef: Ref): ComputedRef {
- return computed(() => calcTextareaLineHeight(textareaRef.value))
+export function useLineHeight(textareaRef: Ref): Ref {
+ let lineHeight = 0
+
+ return customRef((track, trigger) => {
+ watch(textareaRef, () => {
+ lineHeight = calcTextareaLineHeight(textareaRef.value)
+ trigger()
+ })
+
+ return {
+ get() {
+ if (!textareaRef.value) {
+ return 0
+ }
+
+ const value = lineHeight || (lineHeight = calcTextareaLineHeight(textareaRef.value))
+ track()
+ return value
+ },
+ set() {
+ // this is readonly, no setter provided
+ },
+ }
+ })
}
function calcTextareaLineHeight(textarea: HTMLTextAreaElement | undefined): number {
@@ -40,7 +62,7 @@ function calcTextareaLineHeight(textarea: HTMLTextAreaElement | undefined): numb
const lineHeight = el.scrollHeight - paddingSize
el.rows = rows
- return lineHeight
+ return lineHeight > 0 ? lineHeight : 0
},
false,
)
diff --git a/packages/pro/textarea/src/token.ts b/packages/pro/textarea/src/token.ts
index 2685c1f6b..d9079739a 100644
--- a/packages/pro/textarea/src/token.ts
+++ b/packages/pro/textarea/src/token.ts
@@ -15,7 +15,7 @@ export interface ProTextareaContext extends ErrorLinesContext {
props: ProTextareaProps
accessor: FormAccessor
boxSizingData: ComputedRef<ɵBoxSizingData>
- lineHeight: ComputedRef
+ lineHeight: Ref
mergedPrefixCls: ComputedRef
rowCounts: ComputedRef
textareaRef: Ref