How to open keyboard and allow input click while popover form tour is visible (Ionic)

[hvma411]

Hello,

I already figured out how to create whole tour and already did it but we have small problem in our project. We are showing some steps in app settings screen for user and there is one step which allows user to enter his nick or name. The problem is when tour step is visible (popover) then it is impossible to click on input field and keyboard is not opening. I tried to turn off backdrop but problem still appears. I also checked it in dev tools and I can easily click on input to inspect this element while popover is opened.

This is the step:

anchorId: 'add-full-name',
content: this.transloco.translate('modal.onboarding.step10.content'),
title: this.transloco.translate('modal.onboarding.step10.title'),
enableBackdrop: false,

This is tour init config:

enableBackdrop: true,
showArrow: false,
placement: {
	alignment: 'center',
	side: 'bottom'
},
prevBtnTitle: this.transloco.translate('shared.button.prev'),
nextBtnTitle: this.transloco.translate('shared.button.next'),
endBtnTitle: this.transloco.translate('shared.button.end'),

[hakimio]

What exactly is blocking your input? Can you make a stackblitz or codesandbox reproduction?
If backdrop is not obstructing the element, there shouldn't be anything preventing you from focusing the input.

[hvma411]

It is really hard to create code reproduction beacuse it is a bit complex app but I just recorded video to show how it looks like. As you can see at video at second tour step I can scroll my app screen and I can click some other toggle buttons but when I'm trying to click input then it is not getting focused but after I close tour step it is possible to do it. As I said before I also tried to inspect this input with dev tools while tour step is opened and it is possible to click on it to inspect it so there is nothing like some invisible html element which can cause this behaviour (it is also visible at video).

Video:
https://github.com/hakimio/ngx-ui-tour/assets/56310371/35ff6274-4147-40d2-95b9-8e1c77a5b488

Here is also my component part with tourAnchor id:

<app-section-header [title]="'page.settings.header.fullName' | transloco">
	<form [formGroup]="nameFormGroup">
		<app-input
			[placeholder]="'shared.placeholder.nameAndSurname' | transloco"
			[formGroup]="nameFormGroup"
			name="fullName"
			(keyup)="handleNameInputChange($event)"
			tourAnchor="add-full-name"
		></app-input>
	</form>
</app-section-header>

Edit:

I checked and input focus and blur events are triggered when i'm clicking this input

[hakimio]

Must be something Ionic popover is doing to the input. Inspect the input dom to see changed styles or attributes.
Can't help you more without reproduction.

[hvma411]

I found some differences in input classes applied by Angular. I'm not master in Angular but maybe this differences will help to find a problem

input click event with tour step turned off (input works):

and input click event with tour step turned on (input is not getting focued):

[hvma411]

This is really strange behaviour for me but I found simple workaround for this problem so I'll add it here. Maybe someone will need it in future.

Workaround:

Create function to handle event target and to find ion-popover which is used for ngx-ui-tour and simple change its display property to none, then use focus() at event target to focus on input and after that just change ion-popover display property again to block. Use this function in click event on input.

handleInputClick(e: MouseEvent) {
	const popover = document.querySelector('ion-popover');
	const target = e.target as HTMLInputElement;
	popover.style.display = 'none';
	target.focus();
	popover.style.display = 'block';
}