CODEWITHSUNDEEP
iosangularionic-frameworkionic4
Mehdi
Mehdi

Reputation: 2398

ionic 5 Modal shows blank page on iOS

I have an issue with showing a Modal on Ionic 5 Angular 8 on iOS.

So I have a page with two buttons, one is declared in the same page component, the other one is from a child component. When the button in the same page is clicked, the modal opens fine. When the button from the child component is clicked, the event is emitted to the parent Page, which then creates the modal, but the modal slides up, outside the view port.

I have tried all possible trouble shooting I can think of: Removing all custom CSS, removing all html, changing the route of the event, adding a timeout etc.. I don't have any autofocus or bootstrap: [] in my entire app. Here is what the page looks like

export class MyPage implements OnInit, OnDestroy {
   //...
   private openModal (params) {
     const obj = {
      component: ModalComponent,
      componentProps: params
    };
    this.modalProvider.create (obj).then (
        modal => {
        modal.onDidDismiss().then(
           () => {}
        );
        modal.presente ();
     }
    )
   }

   public onOpenModal () {
      const params = {
           //custom properties
      }
      this.openModal(params);
   }

   public localAction () {
      const params = {
          // custom params
       }
      this.openModal (params)
   }
}

Now on the template side :

<ion-content force-overscroll="false" [scrollY]="false">
  <!-- Some html --->
  <ion-grid (click)="localAction()">
     <!-- Some html --->
  </ion-grid>
  <!-- Some html --->
  <child-component (modalOpenEmitter)="onOpenModal($event)">

</ion-content>

Upvotes: 0

Views: 1481

Answers (1)

Mehdi
Mehdi

Reputation: 2398

Ok I have found the problem after several hours digging. It turns out it was because of the child component which host a list of button scrolling horizontally.

When a button from the the child component was clicked, an event was emitted as per normal, but I was using a DOM function called scrollintoview like so:

Child component.ts :

public btnClicked (value) {
   //...
   this.clickEmitter.emit(value); // Normal stuff
   const element = document.getElementById(value.id);
   if (element) {
      element.scrollIntoView(); // This caused the the modal to disappear 
   }
}

This scrollIntoView was there to make the clicked button slide further in the view port.

Unfortunately, this beaks the modal on iOS, but it works fine on android by the way.

Upvotes: 1

Related Questions