René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"[iOS] Issue while opening dialogs inside a modal","articleBody":"**Environment**\r\n\r\npackage.json\r\n```{\r\n  \"nativescript\": {\r\n    \"id\": \"\u003cid\u003e\",\r\n    \"tns-ios\": {\r\n      \"version\": \"6.5.4\"\r\n    },\r\n    \"tns-android\": {\r\n      \"version\": \"6.5.3\"\r\n    }\r\n  },\r\n  \"description\": \"NativeScript Application\",\r\n  \"license\": \"SEE LICENSE IN \u003cyour-license-filename\u003e\",\r\n  \"repository\": \"\u003cfill-your-repository-here\u003e\",\r\n  \"dependencies\": {\r\n    \"@angular/animations\": \"8.0.0\",\r\n    \"@angular/common\": \"8.0.0\",\r\n    \"@angular/compiler\": \"8.0.0\",\r\n    \"@angular/core\": \"8.0.0\",\r\n    \"@angular/forms\": \"8.0.0\",\r\n    \"@angular/http\": \"8.0.0-beta.10\",\r\n    \"@angular/platform-browser\": \"8.0.0\",\r\n    \"@angular/platform-browser-dynamic\": \"8.0.0\",\r\n    \"@angular/router\": \"8.0.0\",\r\n    \"@microsoft/applicationinsights-channel-js\": \"file:microsoft-applicationinsights-channel-js-2.5.8.tgz\",\r\n    \"@microsoft/applicationinsights-web\": \"2.5.9\",\r\n    \"@progress/kendo-date-math\": \"^1.5.1\",\r\n    \"@types/file-saver\": \"^2.0.1\",\r\n    \"compare-versions\": \"^3.6.0\",\r\n    \"email-validator\": \"^2.0.4\",\r\n    \"jwt-decode\": \"^3.1.2\",\r\n    \"moment\": \"^2.27.0\",\r\n    \"nativescript-angular\": \"^8.21.0\",\r\n    \"nativescript-appversion\": \"^1.4.4\",\r\n    \"nativescript-background-http\": \"^4.2.0\",\r\n    \"nativescript-email\": \"^1.6.0\",\r\n    \"nativescript-exit\": \"^1.0.1\",\r\n    \"nativescript-fingerprint-auth\": \"^7.0.2\",\r\n    \"nativescript-http-formdata\": \"^3.0.1\",\r\n    \"nativescript-imagepicker\": \"^7.1.0\",\r\n    \"nativescript-iqkeyboardmanager\": \"^1.5.1\",\r\n    \"nativescript-modal-datetimepicker\": \"^1.2.2\",\r\n    \"nativescript-multi-select\": \"^1.0.6\",\r\n    \"nativescript-numeric-keyboard\": \"^4.3.1\",\r\n    \"nativescript-pdf-view\": \"^2.2.0\",\r\n    \"nativescript-permissions\": \"^1.3.9\",\r\n    \"nativescript-phone\": \"^3.0.1\",\r\n    \"nativescript-plugin-firebase\": \"^10.5.2\",\r\n    \"nativescript-rater\": \"^2.1.2\",\r\n    \"nativescript-screen-orientation\": \"^2.0.0\",\r\n    \"nativescript-theme-core\": \"~1.0.4\",\r\n    \"nativescript-toasts\": \"^1.0.3\",\r\n    \"nativescript-ui-calendar\": \"^6.1.0\",\r\n    \"nativescript-ui-listview\": \"^8.2.0\",\r\n    \"nativescript-ui-sidedrawer\": \"^8.0.1\",\r\n    \"password-validator\": \"^5.1.2\",\r\n    \"reflect-metadata\": \"~0.1.12\",\r\n    \"rxjs\": \"~6.3.0\",\r\n    \"tns-core-modules\": \"^6.5.12\",\r\n    \"zone.js\": \"0.9.1\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@angular/compiler-cli\": \"8.0.0\",\r\n    \"@nativescript/schematics\": \"^0.7.3\",\r\n    \"@ngtools/webpack\": \"8.0.0\",\r\n    \"chalk\": \"^4.1.0\",\r\n    \"codelyzer\": \"~4.5.0\",\r\n    \"minimist\": \"^1.2.5\",\r\n    \"nativescript-dev-webpack\": \"^1.5.1\",\r\n    \"node-sass\": \"4.12.0\",\r\n    \"plist\": \"^3.0.2\",\r\n    \"replace-in-file\": \"^6.1.0\",\r\n    \"tns-android\": \"6.5.3\",\r\n    \"tns-ios\": \"6.5.4\",\r\n    \"tns-platform-declarations\": \"^6.5.12\",\r\n    \"tslint\": \"~5.11.0\",\r\n    \"typescript\": \"3.4.5\"\r\n  },\r\n  \"readme\": \"NativeScript Application\"\r\n}\r\n```\r\n \r\n**Describe the bug**\r\nThis problem only seems to exist on iOS 12 or older. \r\n\r\nI'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.\r\n\r\nOccasionally I will get an error when opening a modal:\r\n\r\n\u003e TypeError: undefined is not an object (evaluating 'data.startDate')\r\n\r\n**Expected behavior**\r\n\r\nTo be able to open dialogs inside a modal.\r\n\r\n**Additional context**\r\n\r\nOpening modal:\r\n```\r\npublic showModal(): void {\r\n    this.onFocus();\r\n    let options = {\r\n        context: {\r\n            data: data\r\n        },\r\n        fullscreen: true,\r\n        viewContainerRef: this.vcRef\r\n    };\r\n    this.modal.showModal(ModalViewComponent, options).then(res =\u003e {\r\n        this.getAllReports();\r\n    });\r\n}\r\n```\r\n\r\nOpening dialog:\r\n```\r\n\u003cStackLayout class=\"form-group\"\u003e\r\n  \u003cLabel text=\"Supervisor\" class=\"label m-b-0\"\u003e\u003c/Label\u003e\r\n  \u003cTextField hint=\"Select\" class=\"input input-border\" [(ngModel)]=\"selectedSupervisor\" [text]=\"selectedSupervisor\" (tap)=\"openDialog('Supervisors', supervisors)\" editable=\"false\"\u003e\u003c/TextField\u003e\r\n\u003c/StackLayout\u003e\r\n```\r\n\r\n```\r\nopenDialog(name: string, data): void {\r\n    this.onFocus();\r\n    let options;\r\n    options = {\r\n        title: `Select ${name}`,\r\n        actions: data.map(x =\u003e x.name),\r\n        cancelButtonText: \"Cancel\",\r\n    };\r\n    action(options).then((result) =\u003e {\r\n        if (result === \"Cancel\") {\r\n        } else {\r\n            if(name === 'Supervisors') {\r\n                this.selectedSupervisor = result;\r\n            }\r\n        }\r\n    });\r\n}\r\n```\r\n\r\nDemo:\r\n\r\nhttps://user-images.githubusercontent.com/15087423/156002086-1b981014-1d7c-4667-af7f-593d2cea415e.mp4","author":{"url":"https://github.com/adammo14","@type":"Person","name":"adammo14"},"datePublished":"2022-02-28T14:43:14.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/2375/nativescript-angular/issues/2375"}