feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

angular/src/directives/proxies.ts

@@ -857,7 +857,7 @@ export class IonText {
 proxyInputs(IonText, ['color', 'mode']);
 
 export declare interface IonTextarea extends StencilComponents<'IonTextarea'> {}
-@Component({ selector: 'ion-textarea', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value'] })
+@Component({ selector: 'ion-textarea', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'autoGrow', 'value'] })
 export class IonTextarea {
   ionChange!: EventEmitter<CustomEvent>;
   ionInput!: EventEmitter<CustomEvent>;
@@ -871,7 +871,7 @@ export class IonTextarea {
   }
 }
 proxyMethods(IonTextarea, ['setFocus', 'getInputElement']);
-proxyInputs(IonTextarea, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']);
+proxyInputs(IonTextarea, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'autoGrow', 'value']);
 
 export declare interface IonThumbnail extends StencilComponents<'IonThumbnail'> {}
 @Component({ selector: 'ion-thumbnail', changeDetection: 0, template: '<ng-content></ng-content>' })

core/api.txt

@@ -1096,6 +1096,7 @@ ion-text,prop,color,string | undefined,undefined,false,false
 ion-text,prop,mode,"ios" | "md",undefined,false,false
 
 ion-textarea,scoped
+ion-textarea,prop,autoGrow,boolean,false,false,false
 ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false

core/src/components.d.ts

@@ -4604,6 +4604,10 @@ export namespace Components {
   }
 
   interface IonTextarea {
+    /**
+    * If `true`, the element height will increase based on the value.
+    */
+    'autoGrow': boolean;
     /**
     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
     */
@@ -4686,6 +4690,10 @@ export namespace Components {
     'wrap'?: 'hard' | 'soft' | 'off';
   }
   interface IonTextareaAttributes extends StencilHTMLAttributes {
+    /**
+    * If `true`, the element height will increase based on the value.
+    */
+    'autoGrow'?: boolean;
     /**
     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
     */

core/src/components/textarea/readme.md

@@ -194,6 +194,7 @@ export default Example;
 
 | Property         | Attribute        | Description                                                                                                                                                                                                                                                            | Type                                     | Default        |
 | ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------- |
+| `autoGrow`       | `auto-grow`      | If `true`, the element height will increase based on the value.                                                                                                                                                                                                        | `boolean`                                | `false`        |
 | `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.                                                                                                                                                      | `string`                                 | `'none'`       |
 | `autofocus`      | `autofocus`      | This Boolean attribute lets you specify that a form control should have input focus when the page loads.                                                                                                                                                               | `boolean`                                | `false`        |
 | `clearOnEdit`    | `clear-on-edit`  | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.                                                                                                                               | `boolean`                                | `false`        |

core/src/components/textarea/test/basic/index.html

@@ -66,6 +66,11 @@
           <ion-label color="primary">Clear on Edit</ion-label>
           <ion-textarea clear-on-edit="true"></ion-textarea>
         </ion-item>
+
+        <ion-item>
+          <ion-label color="primary">Autogrow</ion-label>
+          <ion-textarea auto-grow="true"></ion-textarea>
+        </ion-item>
       </ion-list>
 
       <div text-center>

core/src/components/textarea/test/standalone/index.html

@@ -15,7 +15,8 @@
   <ion-textarea placeholder="Textarea"></ion-textarea>
   <ion-textarea value="value"></ion-textarea>
   <ion-textarea value="44"></ion-textarea>
-  <ion-textarea placeholder="Custom" class="custom"></textarea>
+  <ion-textarea placeholder="Custom" class="custom"></ion-textarea>
+  <ion-textarea placeholder="Auto Grow!" auto-grow="true"></ion-textarea>
 
   <style>
     .custom {

core/src/components/textarea/textarea.tsx

@@ -119,6 +119,11 @@ export class Textarea implements ComponentInterface {
    */
   @Prop() wrap?: 'hard' | 'soft' | 'off';
 
+  /**
+   * If `true`, the element height will increase based on the value.
+   */
+  @Prop() autoGrow = false;
+
   /**
    * The value of the textarea.
    */
@@ -134,6 +139,7 @@ export class Textarea implements ComponentInterface {
     if (nativeInput && nativeInput.value !== value) {
       nativeInput.value = value;
     }
+    this.runAutoGrow();
     this.emitStyle();
     this.ionChange.emit({ value });
   }
@@ -183,9 +189,18 @@ export class Textarea implements ComponentInterface {
   componentDidLoad() {
     this.debounceChanged();
 
+    this.runAutoGrow();
+
     this.ionInputDidLoad.emit();
   }
 
+  private runAutoGrow() {
+    if (this.nativeInput && this.autoGrow) {
+      this.nativeInput.style.height = 'inherit';
+      this.nativeInput.style.height = this.nativeInput.scrollHeight + 'px';
+    }
+  }
+
   componentDidUnload() {
     this.ionInputDidUnload.emit();
   }