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
This commit is contained in:
Adam LaCombe
2019-05-07 16:52:24 -04:00
committed by Liam DeBeasi
parent 669ec0da3d
commit cc8678ad58
7 changed files with 34 additions and 3 deletions

View File

@ -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();
}