fix(comp:textarea): fix line-height to ensure height calculation (#1214)

IDuxFE · Oct 21, 2022 · 2d4ffa4 · 2d4ffa4
1 parent 7940bc5
commit 2d4ffa4
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 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; 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; 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; 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; line-height: -4px; height: 0px; overflow: hidden;\\"></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; 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; 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; 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; line-height: -4px; height: 0px; overflow: hidden; max-height: -4px;\\"></textarea><!----></span>"`;
diff --git a/packages/components/textarea/src/composables/useAutoRows.ts b/packages/components/textarea/src/composables/useAutoRows.ts
@@ -115,6 +115,8 @@ export function useAutoRows(
       return
     }
 
+    textarea.style.lineHeight = `${cachedLineHeight.value}px`
+
     // Use the scrollHeight to know how large the textarea *would* be if fit its entire value.
     const height = Math.max(getTextareaScrollHeight(), getTextareaPlaceholderHeight()!)
 

diff --git a/packages/components/textarea/src/composables/useLineHeight.ts b/packages/components/textarea/src/composables/useLineHeight.ts
@@ -42,6 +42,6 @@ function calcTextareaLineHeight(textarea: HTMLTextAreaElement | undefined): numb
 
       return lineHeight
     },
-    true,
+    false,
   )
 }