fix(comp:textarea): lineheight error when not rendered initially (#1372)

IDuxFE · Dec 23, 2022 · 627e018 · 627e018
1 parent bda0db2
commit 627e018
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git 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`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: vertical;\\"></textarea><!----></span>"`;
 
-exports[`Textarea > resize and autoRows work 1`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none; line-height: -4px; height: 0px; overflow: hidden;\\"></textarea><!----></span>"`;
+exports[`Textarea > resize and autoRows work 1`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none;\\"></textarea><!----></span>"`;
 
-exports[`Textarea > resize and autoRows work 2`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none; line-height: -4px; height: 0px; overflow: hidden;\\"></textarea><!----></span>"`;
+exports[`Textarea > resize and autoRows work 2`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none;\\"></textarea><!----></span>"`;
 
-exports[`Textarea > resize and autoRows work 3`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none; line-height: -4px; height: 0px; overflow: hidden; max-height: -4px;\\"></textarea><!----></span>"`;
+exports[`Textarea > resize and autoRows work 3`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none;\\"></textarea><!----></span>"`;
 
-exports[`Textarea > resize and autoRows work 4`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none; line-height: -4px; height: 0px; overflow: hidden; max-height: -4px;\\"></textarea><!----></span>"`;
+exports[`Textarea > resize and autoRows work 4`] = `"<span class=\\"ix-textarea ix-textarea-md\\" data-count=\\"\\"><textarea class=\\"ix-textarea-inner\\" style=\\"resize: none;\\"></textarea><!----></span>"`;
diff --git 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<number>
+  lineHeight: Ref<number>
   boxSizingData: ComputedRef<BoxSizingData>
 }
 

diff --git 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<HTMLTextAreaElement | undefined>): ComputedRef<number> {
-  return computed(() => calcTextareaLineHeight(textareaRef.value))
+export function useLineHeight(textareaRef: Ref<HTMLTextAreaElement | undefined>): Ref<number> {
+  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
@@ -15,7 +15,7 @@ export interface ProTextareaContext extends ErrorLinesContext {
   props: ProTextareaProps
   accessor: FormAccessor
   boxSizingData: ComputedRef<ɵBoxSizingData>
-  lineHeight: ComputedRef<number>
+  lineHeight: Ref<number>
   mergedPrefixCls: ComputedRef<string>
   rowCounts: ComputedRef<number[]>
   textareaRef: Ref<HTMLTextAreaElement | undefined>