[iOS] Issue while opening dialogs inside a modal

[adammo14]

Environment

package.json

  "nativescript": {
    "id": "<id>",
    "tns-ios": {
      "version": "6.5.4"
    },
    "tns-android": {
      "version": "6.5.3"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "8.0.0",
    "@angular/common": "8.0.0",
    "@angular/compiler": "8.0.0",
    "@angular/core": "8.0.0",
    "@angular/forms": "8.0.0",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "8.0.0",
    "@angular/platform-browser-dynamic": "8.0.0",
    "@angular/router": "8.0.0",
    "@microsoft/applicationinsights-channel-js": "file:microsoft-applicationinsights-channel-js-2.5.8.tgz",
    "@microsoft/applicationinsights-web": "2.5.9",
    "@progress/kendo-date-math": "^1.5.1",
    "@types/file-saver": "^2.0.1",
    "compare-versions": "^3.6.0",
    "email-validator": "^2.0.4",
    "jwt-decode": "^3.1.2",
    "moment": "^2.27.0",
    "nativescript-angular": "^8.21.0",
    "nativescript-appversion": "^1.4.4",
    "nativescript-background-http": "^4.2.0",
    "nativescript-email": "^1.6.0",
    "nativescript-exit": "^1.0.1",
    "nativescript-fingerprint-auth": "^7.0.2",
    "nativescript-http-formdata": "^3.0.1",
    "nativescript-imagepicker": "^7.1.0",
    "nativescript-iqkeyboardmanager": "^1.5.1",
    "nativescript-modal-datetimepicker": "^1.2.2",
    "nativescript-multi-select": "^1.0.6",
    "nativescript-numeric-keyboard": "^4.3.1",
    "nativescript-pdf-view": "^2.2.0",
    "nativescript-permissions": "^1.3.9",
    "nativescript-phone": "^3.0.1",
    "nativescript-plugin-firebase": "^10.5.2",
    "nativescript-rater": "^2.1.2",
    "nativescript-screen-orientation": "^2.0.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-toasts": "^1.0.3",
    "nativescript-ui-calendar": "^6.1.0",
    "nativescript-ui-listview": "^8.2.0",
    "nativescript-ui-sidedrawer": "^8.0.1",
    "password-validator": "^5.1.2",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~6.3.0",
    "tns-core-modules": "^6.5.12",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "8.0.0",
    "@nativescript/schematics": "^0.7.3",
    "@ngtools/webpack": "8.0.0",
    "chalk": "^4.1.0",
    "codelyzer": "~4.5.0",
    "minimist": "^1.2.5",
    "nativescript-dev-webpack": "^1.5.1",
    "node-sass": "4.12.0",
    "plist": "^3.0.2",
    "replace-in-file": "^6.1.0",
    "tns-android": "6.5.3",
    "tns-ios": "6.5.4",
    "tns-platform-declarations": "^6.5.12",
    "tslint": "~5.11.0",
    "typescript": "3.4.5"
  },
  "readme": "NativeScript Application"
}

Describe the bug
This problem only seems to exist on iOS 12 or older.

I'm using TextField to 'fake' select dropdown by listening for a (tap) event on them and then opening a Dialog. Opening a dialog inside of a modal requires 2 clicks. Dialog will only open on the second click and once you select an action from it and close the modal, the second dialog (first click) opens.

Occasionally I will get an error when opening a modal:

TypeError: undefined is not an object (evaluating 'data.startDate')

Expected behavior

To be able to open dialogs inside a modal.

Additional context

Opening modal:

public showModal(): void {
    this.onFocus();
    let options = {
        context: {
            data: data
        },
        fullscreen: true,
        viewContainerRef: this.vcRef
    };
    this.modal.showModal(ModalViewComponent, options).then(res => {
        this.getAllReports();
    });
}

Opening dialog:

<StackLayout class="form-group">
  <Label text="Supervisor" class="label m-b-0"></Label>
  <TextField hint="Select" class="input input-border" [(ngModel)]="selectedSupervisor" [text]="selectedSupervisor" (tap)="openDialog('Supervisors', supervisors)" editable="false"></TextField>
</StackLayout>

openDialog(name: string, data): void {
    this.onFocus();
    let options;
    options = {
        title: `Select ${name}`,
        actions: data.map(x => x.name),
        cancelButtonText: "Cancel",
    };
    action(options).then((result) => {
        if (result === "Cancel") {
        } else {
            if(name === 'Supervisors') {
                this.selectedSupervisor = result;
            }
        }
    });
}

Demo:

Simulator.Screen.Recording.-.iPhone.X.-.2022-02-28.at.14.39.55.mp4