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

Question

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.

Answer 1

fix can be found here, check it out: https://forum.ionicframework.com/t/popover-alertsheet-etc-on-ios-scrolls-back-content-and-not-the-popover-itself/180122