text-field: The height is automatically updated when the value is mod…

…ified through JS. fixed #347
zdhxiong · Oct 21, 2024 · 6c9ef64 · 6c9ef64
1 parent d699173
commit 6c9ef64
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/docs/en/components/text-field.md b/docs/en/components/text-field.md
@@ -28,6 +28,9 @@ The `variant` attribute modifies the shape of the text field.
 
 ```html,example,expandable
 <mdui-text-field variant="filled" label="Text Field"></mdui-text-field>
+
+<br/><br/>
+
 <mdui-text-field variant="outlined" label="Text Field"></mdui-text-field>
 ```
 
@@ -130,6 +133,8 @@ To automatically adjust the height of the text field based on the length of the
 ```html,example,expandable
 <mdui-text-field autosize label="Text Field"></mdui-text-field>
 
+<br/><br/>
+
 <mdui-text-field autosize min-rows="2" max-rows="5" label="Text Field"></mdui-text-field>
 ```
 

diff --git a/docs/zh-cn/components/text-field.md b/docs/zh-cn/components/text-field.md
@@ -28,6 +28,9 @@ import type { TextField } from 'mdui/components/text-field.js';
 
 ```html,example,expandable
 <mdui-text-field variant="filled" label="Text Field"></mdui-text-field>
+
+<br/><br/>
+
 <mdui-text-field variant="outlined" label="Text Field"></mdui-text-field>
 ```
 
@@ -130,6 +133,8 @@ import type { TextField } from 'mdui/components/text-field.js';
 ```html,example,expandable
 <mdui-text-field autosize label="Text Field"></mdui-text-field>
 
+<br/><br/>
+
 <mdui-text-field autosize min-rows="2" max-rows="5" label="Text Field"></mdui-text-field>
 ```
 

diff --git a/packages/mdui/src/components/text-field/index.ts b/packages/mdui/src/components/text-field/index.ts
@@ -573,6 +573,8 @@ export class TextField
     if (this.hasUpdated) {
       await this.updateComplete;
 
+      this.setTextareaHeight();
+
       // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
       const form = this.formController.getForm();
       if (form && formResets.get(form)?.has(this)) {