From cc8678ad58f7dddcaf89e5b06d1de1f53ae0e57d Mon Sep 17 00:00:00 2001 From: Adam LaCombe Date: Tue, 7 May 2019 16:52:24 -0400 Subject: [PATCH] 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 | 4 ++-- core/api.txt | 1 + core/src/components.d.ts | 8 ++++++++ core/src/components/textarea/readme.md | 1 + .../src/components/textarea/test/basic/index.html | 5 +++++ .../textarea/test/standalone/index.html | 3 ++- core/src/components/textarea/textarea.tsx | 15 +++++++++++++++ 7 files changed, 34 insertions(+), 3 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 4f286be95ee..cfdfb54eee6 100644 --- a/angular/src/directives/proxies.ts +++ b/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: '', 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: '', 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; ionInput!: EventEmitter; @@ -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: '' }) diff --git a/core/api.txt b/core/api.txt index 5fc7051bf92..0dd73c9e437 100644 --- a/core/api.txt +++ b/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 diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 328d4bb28b9..6736face67a 100644 --- a/core/src/components.d.ts +++ b/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. */ diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md index 8c7bb4d793a..fb0246e3b7b 100644 --- a/core/src/components/textarea/readme.md +++ b/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` | diff --git a/core/src/components/textarea/test/basic/index.html b/core/src/components/textarea/test/basic/index.html index a1547aeb457..3ebe9a154d1 100644 --- a/core/src/components/textarea/test/basic/index.html +++ b/core/src/components/textarea/test/basic/index.html @@ -66,6 +66,11 @@ Clear on Edit + + + Autogrow + +
diff --git a/core/src/components/textarea/test/standalone/index.html b/core/src/components/textarea/test/standalone/index.html index 64feede977a..751d94bf148 100644 --- a/core/src/components/textarea/test/standalone/index.html +++ b/core/src/components/textarea/test/standalone/index.html @@ -15,7 +15,8 @@ - + +