Popover, Alertsheet etc... on iOS scrolls back content and not the popover itself

Ionic Framework
1

Hello everyone, I hope you all having a great day.

I am facing an issue on iOS with ActionSheets and Popovers, while a popover is appeared, the user can scroll when swiping inside the popover, and it scrolls the back content on which i open the popover from, if i click outside of the popover it closes the popover and it does not let me swipe at all but when i click inside the popover it scrolls the back content of the popover not the popover itself.

here is a video of it:
sorry had no option to upload video, here is a link:
Video of popover/actionsheet

here is code of opening the popover

async openCreateNewFolder(type, folder?) {
        const popover = await this.popoverController.create({
          component: NewFolderComponent,
          componentProps: {
            folderId: this.folderId,
            parentId: this.parentId,
            type,
            folder
          }
        });
     
        popover.onDidDismiss().then((dataReturned) => {
          console.log(dataReturned);
          if (dataReturned.data !== undefined) {
            if (dataReturned.data === 'cancelClicked') {

            } else if (dataReturned.data === 'confirmClickedFolder') {
              this.deleteFolder(dataReturned.role);
            } else if (dataReturned.data === 'confirmClickedFile') {
              this.deleteFile(dataReturned.role);
            } else if (dataReturned.data === 'newFolderCreated') {
              this.getFolders();
            }
            // this.dataReturned = dataReturned.data;
            //alert('Modal Sent Data :'+ dataReturned);
          }
        });
     
        return await popover.present();
      }

here is a code for the actionsheet:

async confirmChangeLanguageDialogue(selectedLanguage) {
    let languageClass: any;
    if (selectedLanguage === 'English') {
      languageClass = 'alertControllerEnglishLanguageIcon';
    } else if (selectedLanguage === 'Deutch') {
      languageClass = 'alertControllerGermanLanguageIcon';
    } else if (selectedLanguage === 'French') {
      languageClass = 'alertControllerFrenchLanguageIcon';
    } else if (selectedLanguage === 'Italian') {
      languageClass = 'alertControllerItalianLanguageIcon';
    }
    const alert = await this.alertCtrl.create({
      header: this.translate.instant('confirm'),
      mode: 'ios',
      message: this.translate.instant('change_language_confirm_message', {selected_language: selectedLanguage}),
      buttons: [
        {
          text: this.translate.instant('cancel'),
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: this.translate.instant('okay'),
          cssClass: languageClass,
          handler: () => {
            this.requestChangeLanguage(selectedLanguage);
          }
        }
      ]
    });

    await alert.present();
    const result = await alert.onDidDismiss();
    console.log(result);
  }

Any help would be appriciated, thank you.

2

Hello @mhoxha ,

I faced the same issue this year during my end-of-training internship with using the popover (I had not used actionSheets).
After more than ten days of research, I managed to solve the problem with this little piece of code:

Let’s suppose that the HTML selector of the component (or page) that uses the popover is called 'manage-files' (where you define openCreateNewFolder(type, folder?))

Put the code below in your global.scss file

.disable-scroll {
    manage-files.ion-page {
        pointer-events: auto;
    }
}

Hope this will help you :slightly_smiling_face:

1 Like
4

I will give this a try, and let you know about it. thank you for your reply.

EDITED:

THANK YOU VERY MUCH, THAT DID THE TRICK, IT WORKS LIKE CHARM.