Skip to content
Permalink
Browse files

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
  • Loading branch information...
adamlacombe authored and liamdebeasi committed May 7, 2019
1 parent 669ec0d commit cc8678ad58f7dddcaf89e5b06d1de1f53ae0e57d
@@ -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>' })
@@ -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
@@ -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.
*/
@@ -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` |
@@ -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>
@@ -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 {
@@ -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();
}

0 comments on commit cc8678a

Please sign in to comment.
You can’t perform that action at this time.