Best way to open a modal on input focus?

Basically I want a modal to load when focusing an input. Similar to what happens when you try to edit your email on instagram. You tap the email input on your profile screen and a modal pops up where you can edit and save the change, rather than doing it on the profile screen itself.

I can get it to work using (focus)=“Modal()” for Android, but this does not work on IOS. If the input i’m focussing is already in a modal itself it does nothing until I try to close the modal with the input, then it will show the modal that should have loaded when I focused the input.

If the input is on a normal screen it will load the modal on focus, but the input will remain focused and the keyboard remains open.

Any help / ideas would be appreciated.

Cheers

I’m doing this with an Input which is disabled. On that input I’m using the (click)="openModal()" event to open the modal and ondidismiss i set the label value that the User can see what he wrote,selected what ever.

If you need any further informations just ask :wink:

I actually tried the same thing and couldn’t get it to work. I’ll give it another go.

Yeah, that solution works for IOS but not for Android haha.

The other problem with that solution is if the input is part of a group of input the next button on the accessory bar will skip over the disabled input which gives a bad user experience.

Thanks for the suggestion.

thx for that info.
I’m using it just in single input fields and no groups and with that it’s working fine for Android didn’t get any problems until now :slight_smile:

Anyone else got any suggestions?

I have the same problem… please provide solution asap.

Anyone found a solution for this ? To solve this I did the following:

<ion-item>
                  <button ion-button item-right clear icon-only (click)="searchLocation($event)">
                    <ion-icon name="md-add-circle"></ion-icon>
                  </button>
                  <ion-input type="search" value="" [disabled]="true"></ion-input>
</ion-item>