Ion-textarea autosize component not working in --prod mode

Ionic Framework ionic-v3
1

Hello Guys,

Please help me, I have implemented Ion-textarea auto grow custom component. when running in web on 'ionic serve ’ command it is working better but when executed ‘ionic cordova run android --prod command’ doesn’t work in mobile or tab.

2

How did you implement the component?

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console and network tabs for errors.

3

this is the code of custom component bellow

auto-size.ts file

import { ElementRef, HostListener, Directive, OnInit } from '@angular/core';

@Directive({
	selector: 'ion-textarea[autosize]'
})
export class AutosizeTextAreaComponent {
	@HostListener('input', ['$event.target'])
	onInput(textArea: HTMLTextAreaElement): void {
		this.adjust();
	}

	constructor(public element: ElementRef) {
	}

	ngOnInit(): void {
		setTimeout(() => this.adjust(), 0);
	}

	adjust(): void {
		let ta = this.element.nativeElement.querySelector("textarea");
		ta.style.overflow = "hidden";
		ta.style.height = "auto";
		ta.style.height = ta.scrollHeight + "px";
	}
}`

And

demo.html page

<ion-textarea  type="text" autosize rows="1" (keypress)="_lengthKeyPress($event)" formControlName="g11" [(ngModel)]="obj.g11"></ion-textarea>

It is working on mobile when executed ionic cordova run android but not working in ionic cordova run android --prod command.

5

When executed ionic cordova run android textarea autogrow working fine but not working
on this ionic cordova run android --prod command.

Please help me…

6

I can only repeat my question:

7

Try this its a simple method no need to import third libraries
I found this method on ionic framework

<ion-textarea (input)=“adjustTextarea($event);” >
and on ts file write this code and enjoy !
protected adjustTextarea(event: any): void {
let textarea: any = event.target;
textarea.style.overflow = ‘hidden’;
textarea.style.height = ‘auto’;
textarea.style.height = textarea.scrollHeight + ‘px’;
return;
}

1 Like
8

this package does all the autosizing of my ion-textareas for me https://github.com/chrum/ngx-autosize just follow the guide and get it working, if it doesn’t work importing it into the app.module.ts then try importing it into the page’s module, I personally needed that dunno if you will, but package is a life saver