Ionic 5 ion-input does not work correctly inside ion-nav component

[alexeveryware]

I have a problem with ion-nav component. In my UI I have a modal with an entry point for all my app. There is an internal navigation showing different pages (signin, signup, password-recovery …). All of this works fine. But the problem is: when I put an ion-input inside any page inside the ion-nav it doesn’t work properly. For example, the clearInput icon does not appear. Also, I have imported Angular Material in the project, and the same thing happens with the mat-form-field as well. They render and work perfectly in the entire app except within the ion-nav component.

Out of ion-nav all works fine

But inside ion-nav it doesn’t work properly

[mhartington]

Can you share a code sample please? It’s difficult to bug this from just an image

[alexeveryware]

Sorry for the delay, I will try to explain better with code samples:

At first, in home page, all works fine (first image) and the code is:

<form class="w-100">
	
	<!-- IONIC INPUTS -->
	<!-- Input with value -->
	<ion-input value="custom"></ion-input>
	
	<!-- Input with placeholder -->
	<ion-input placeholder="Enter Input"></ion-input>
	
	<!-- Input with clear button when there is a value -->
	<ion-input clearInput value="clear me"></ion-input>
	
	<!-- Input floating label and clear icon -->
	<ion-item>
		<ion-label position="floating">Floating Label</ion-label>
		<ion-input clearInput></ion-input>
	</ion-item>
	
	<!-- ANGULAR MATERIAL FORM FIELDS -->
	<mat-form-field class="w-100" appearance="outline">
		<mat-label>Favorite food</mat-label>
		<input matInput placeholder="Ex. Pizza" value="Sushi">
	</mat-form-field>
	
	<mat-form-field class="w-100" appearance="fill">
		<mat-label>Favorite food</mat-label>
		<input matInput placeholder="Ex. Pizza" value="Sushi">
	</mat-form-field>
	
	<mat-form-field class="w-100" appearance="standard">
		<mat-label>Favorite food</mat-label>
		<input matInput placeholder="Ex. Pizza" value="Sushi">
	</mat-form-field>
	
	<mat-form-field class="w-100" appearance="fill">
		<mat-label>Leave a comment</mat-label>
		<textarea matInput placeholder="Ex. It makes me feel..."></textarea>
	</mat-form-field>
	
	<mat-form-field class="w-100" appearance="fill">
		<mat-label>Choose a date</mat-label>
		<input matInput [matDatepicker]="picker">
		<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
		<mat-datepicker #picker></mat-datepicker>
	</mat-form-field>
</form>

Then, this same code doesn’t work into ion-nav. When you click in signup button or any part of app where you need create an account, a modal with login and signup options appears. I have this code in each part where you get this login modal:

async presentModal() {
	const modal = await this.modalController.create({
		component: EntryPage,
		componentProps: {
			rootPage: SignupPage,
		},
		swipeToClose: true,
		mode: 'ios',
		backdropDismiss: true
	});
	return await modal.present();
}

This function calls to EntryPage, the entry point with ion-nav component. Here I can put some different pages like signup, signin, recover password… with an independent navigation. The code of EntryPage:

HTML

<ion-content>
  <ion-nav [root]="rootPage" [rootParams]="rootPage" swipeGesture="false" [animated]="animated"></ion-nav>
</ion-content>

TS

export class EntryPage implements OnInit {
	
	rootPage: SignupPage;
	
	constructor(
		public modalController: ModalController,
		public navCtrl: NavController,
		public router: Router,
		public responsiveService: ResponsiveService) {
	}
	
	ngOnInit() {}
	
	moveToDetail() {
		const nav = document.querySelector('ion-nav');
		nav.push(SigninPage);
	}
	
	goBack() {
		this.navCtrl.back();
	}
	
	dismiss() {
		this.modalController.dismiss({
			'dismissed': true
		});
	}
}

So, the root page of ion-nav is Signup page. Here I have the same form code but doesn’t work. ion-inputs don’t render clear icon in DOM and Angular Material form fields don’t work…

I hope you have suficient with this code, do you need something more?

Thanks

PD. Sorry for my english

[alexeveryware]

Excuse me, could you see this?
[Ionic 5 ion-input does not work correctly inside ion-nav component]