Ionic 3 (click) event into Modal doesn't work in ios

user_8597668 0
Viewed 1188

I'm lost with an issue on IOS. I'm implementing a chat, where you have a list of contacts and, when you click on one of it, it will display the list of the associated messages. It works perfectly on android and on browser (even on IOS browser), but on IOS, when I click on a contact to display the messages, nothing happened. My function is not called from the html, even when i tried to ad some testing buttons everywhere on my ion-content. It only works on my ion-header.

Could you please save my life ?

Here's my code :

HTML :

<ion-header>
    <ion-toolbar>
        <ion-buttons>
            <button ion-button (click)="displayChat(undefined)">
                Test (works here)
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="no-scroll" style="height: 100% !important;">
    <div>
        <button ion-button (click)="displayChat(undefined)">
            Test ?
        </button>
        <ion-list class="contactList">
            <ion-item *ngFor="let chat of chats" 
             (click)="displayChat(chat)">
                {{chat.contactName}}
                 <br>
                <span class="chatDate">
                    {{chat.lastMessageSend}}
                </span>
            </ion-item>
        </ion-list>
        <button ion-button (click)="displayChat(undefined)">
            Test ?
        </button>
    </div>
</ion-content>
<ion-footer>
    <ion-toolbar>
        <ion-title>Footer</ion-title>
        <button ion-button (click)="displayChat(undefined)">
            Test ?
        </button>
    </ion-toolbar>
</ion-footer>

TS :

displayChat(chat: Chat) {
    console.log("Ok");
}

I reduced my code to be more readable.

Enjoy !

EDIT

.no-scroll .scroll-content {
    overflow: hidden;
}

.chatDate {
    float: right;
    font-size: 0.7em;
}

It's not working in the footer either.

ionic3 ionic-framework angular html ios
2 Answers

Ok, I figured out what the problem was.

Actually, this code was running into a Ionic Modal from a Popover.

I had to keep my Popover opened to handle some treatment with the OnDidDismiss method, but it could execute this method only if the popover is staying opened.

But, in IOS (of course), you cannot click on a modal if a Popover (or probably any another absolute element) is behind your modal.

So, to solve this issue, I created an Observable to handle the OnDidDismiss method (of the Modal), which I give as a parameter of the viewCtrl.dismiss method to get it back on the OnDidDismiss of the Popover view, and then subscribe the Observable.

user_85976680

Inside your button component, try adding ion-item instead of ion-button. I have a bit similar code where it is working fine.

Eg:

<button ion-item (click)="onClick()">Click me</button>

Let me know what happens after this! Will be ready to help.

user_69107480
Related