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

ionic-team · Feb 6, 2019 · f66c8d3 · f66c8d3
1 parent ad0c8a4
commit f66c8d3
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 3 deletions.
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
@@ -855,7 +855,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>;
@@ -869,7 +869,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>' })

diff --git a/core/api.txt b/core/api.txt
@@ -1076,6 +1076,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

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -4514,6 +4514,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.
     */
@@ -4596,6 +4600,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.
     */

diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md
@@ -100,6 +100,7 @@ The textarea component accepts the [native textarea attributes](https://develope
 
 | 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`        |

diff --git a/core/src/components/textarea/test/preview/index.html b/core/src/components/textarea/test/preview/index.html
@@ -77,6 +77,13 @@
         </ion-item>
       </ion-list>
 
+      <div padding>
+        <ion-textarea placeholder="Auto Grow!" value="Height will increase as the user types...
+
+
+Pretty cool!" auto-grow="true"></ion-textarea>
+      </div>
+
       <div text-center>
         <ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
           Toggle Disabled

diff --git a/core/src/components/textarea/test/standalone/index.html b/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 {

diff --git a/core/src/components/textarea/textarea.tsx b/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.ionChange.emit({ value });
   }
 
@@ -169,6 +175,14 @@ export class Textarea implements ComponentInterface {
 
   componentDidLoad() {
     this.debounceChanged();
+    this.runAutoGrow();
+  }
+
+  private runAutoGrow() {
+    if (this.nativeInput && this.autoGrow) {
+      this.nativeInput.style.height = '1px';
+      this.nativeInput.style.height = (4 + this.nativeInput.scrollHeight) + 'px';
+    }
   }
 
   /**