diff --git a/src/directives/auto-rows.ts b/src/directives/auto-rows.ts
index 39301b339..3e7a24291 100644
--- a/src/directives/auto-rows.ts
+++ b/src/directives/auto-rows.ts
@@ -22,17 +22,14 @@ import { Directive, ElementRef, HostListener, Output, EventEmitter } from '@angu
*
*/
@Directive({
- selector: 'textarea[core-auto-rows]'
+ selector: 'textarea[core-auto-rows], ion-textarea[core-auto-rows]'
})
export class CoreAutoRowsDirective {
- protected element: HTMLTextAreaElement;
protected height = 0;
@Output() onResize: EventEmitter; // Emit when resizing the textarea.
- constructor(element: ElementRef) {
- this.element = element.nativeElement || element;
- this.height = this.element.scrollHeight;
+ constructor(private element: ElementRef) {
this.onResize = new EventEmitter();
}
@@ -48,9 +45,9 @@ export class CoreAutoRowsDirective {
}
/**
- * Resize after init.
+ * Resize after content.
*/
- ngAfterViewInit(): void {
+ ngAfterViewContent(): void {
this.resize();
}
@@ -59,13 +56,19 @@ export class CoreAutoRowsDirective {
* @param {any} $event Event fired.
*/
protected resize($event?: any): void {
+ let nativeElement = this.element.nativeElement;
+ if (nativeElement.tagName == 'ION-TEXTAREA') {
+ // The first child of ion-textarea is the actual textarea element.
+ nativeElement = nativeElement.firstElementChild;
+ }
+
// Set height to 1px to force scroll height to calculate correctly.
- this.element.style.height = '1px';
- this.element.style.height = this.element.scrollHeight + 'px';
+ nativeElement.style.height = '1px';
+ nativeElement.style.height = nativeElement.scrollHeight + 'px';
// Emit event when resizing.
- if (this.height != this.element.scrollHeight) {
- this.height = this.element.scrollHeight;
+ if (this.height != nativeElement.scrollHeight) {
+ this.height = nativeElement.scrollHeight;
this.onResize.emit();
}
}