fix(pro:textarea): height isn't correct when rows is set (#1894)

IDuxFE · Apr 17, 2024 · f9737fd · f9737fd
1 parent f8aedce
commit f9737fd
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/packages/pro/textarea/demo/Basic.vue b/packages/pro/textarea/demo/Basic.vue
@@ -3,6 +3,7 @@
     <IxSpace vertical>
       <IxProTextarea
         v-model:value="value"
+        :rows="3"
         :disabled="disabled"
         :onChange="onChange"
         placeholder="Basic usage"
@@ -25,6 +26,5 @@ const onChange = (value: string, oldValue: string) => {
 <style scoped lang="less">
 .ix-pro-textarea {
   width: 480px;
-  height: 210px;
 }
 </style>
diff --git a/packages/pro/textarea/src/ProTextarea.tsx b/packages/pro/textarea/src/ProTextarea.tsx
@@ -39,6 +39,7 @@ export default defineComponent({
   setup(props, { slots, expose }) {
     const common = useGlobalConfig('common')
     const { globalHashId, hashId, registerToken } = useThemeToken('proTextarea')
+    const { themeTokens } = useThemeToken()
     registerToken(getThemeTokens, transforms)
 
     const config = useGlobalConfig('textarea')
@@ -63,7 +64,7 @@ export default defineComponent({
     const valueRef = toRef(accessor, 'value')
 
     const { lineHeight, boxSizingData, resizeToFitContent } = ɵUseAutoRows(elementRef, ref(true))
-    const rowCounts = useRowCounts(elementRef, valueRef, lineHeight, boxSizingData, props.rows)
+    const rowCounts = useRowCounts(props, elementRef, valueRef, lineHeight, boxSizingData)
     const errorLinesContext = useErrorLines(props, lineHeight, boxSizingData)
     const dataCount = useDataCount(props, config, valueRef)
 
@@ -100,7 +101,14 @@ export default defineComponent({
       normalizeStyle({
         resize: props.resize ?? config.resize,
         height: props.rows
-          ? `${props.rows * lineHeight.value + boxSizingData.value.paddingBottom + boxSizingData.value.paddingTop}px`
+          ? `${
+              props.rows * lineHeight.value +
+              boxSizingData.value.paddingBottom +
+              boxSizingData.value.paddingTop +
+              boxSizingData.value.borderBottom +
+              boxSizingData.value.borderTop +
+              themeTokens.value.controlLineWidth * 2
+            }px`
           : undefined,
       }),
     )

diff --git a/packages/pro/textarea/src/composables/useErrorLines.ts b/packages/pro/textarea/src/composables/useErrorLines.ts
@@ -7,7 +7,7 @@
 
 import type { ProTextareaProps } from '../types'
 import type { ɵBoxSizingData } from '@idux/components/textarea'
-import type { ComputedRef } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 
 import { useState } from '@idux/cdk/utils'
 
@@ -20,7 +20,7 @@ export interface ErrorLinesContext {
 
 export function useErrorLines(
   props: ProTextareaProps,
-  lineHeight: ComputedRef<number>,
+  lineHeight: Ref<number>,
   sizingData: ComputedRef<ɵBoxSizingData>,
 ): ErrorLinesContext {
   const [visibleErrIndex, setvisibleErrIndex] = useState<number>(-1)

diff --git a/packages/pro/textarea/src/composables/useRowsCounts.ts b/packages/pro/textarea/src/composables/useRowsCounts.ts
@@ -5,24 +5,27 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
+import type { ProTextareaProps } from '../types'
+
 import { type ComputedRef, type Ref, watch } from 'vue'
 
 import { useResizeObserver } from '@idux/cdk/resize'
 import { useState } from '@idux/cdk/utils'
 import { type ɵBoxSizingData, ɵMeasureTextarea } from '@idux/components/textarea'
 
 export function useRowCounts(
+  props: ProTextareaProps,
   textareaRef: Ref<HTMLTextAreaElement | undefined>,
   valueRef: Ref<string | undefined>,
-  lineHeight: ComputedRef<number>,
+  lineHeight: Ref<number>,
   sizingData: ComputedRef<ɵBoxSizingData>,
-  rows: number,
 ): ComputedRef<number[]> {
   const [rowCounts, setRowCounts] = useState<number[]>([])
   const calcRowCounts = () => {
     const textarea = textareaRef.value!
     const lines = valueRef.value?.split('\n') ?? []
     const { paddingSize } = sizingData.value
+    const { rows } = props
 
     const res = lines.map(line =>
       ɵMeasureTextarea(
@@ -45,7 +48,7 @@ export function useRowCounts(
     setRowCounts(res)
   }
 
-  watch(valueRef, calcRowCounts)
+  watch([valueRef, () => props.rows], calcRowCounts)
   useResizeObserver(textareaRef, calcRowCounts)
 
   return rowCounts