Best way to open a modal on input focus?


#1

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


#2

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:


#3

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


#4

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.


#5

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:


#6

Anyone else got any suggestions?


#7

I have the same problem… please provide solution asap.


#8

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>