Overlay component issues #14662
Description
Bug Report
Ionic Info
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
System:
Node : v8.9.1
npm : 5.7.1
OS : macOS High Sierra
Misc:
backend : pro
Describe the Bug
There are several issues related to overlay components (<ion-alert>, <ion-modal>, etc.).
- Escape key can close multiple overlays
- zIndex for popovers should not be below modals
- Hooks to handle dismiss via escape or backdrop clicks
Escape key can close multiple overlays
The escape key is handle by several of the overlay controllers and each one dismisses the top instance that it has created. For example, the ionic source code includes:
// modal-controller.tsx
@Listen('body:keyup.escape')
protected escapeKeyUp() {
removeLastOverlay(this.modals);
}
// alert-controller.tsx
@Listen('body:keyup.escape')
protected escapeKeyUp() {
removeLastOverlay(this.alerts);
}
// etc.When the escape key is pressed it triggers all of the listeners (in this example the listeners on the modal controller and on the alert controller).
Each of these listeners then closes the topmost instance of it's overlay so multiple overlays can get closed. For example, if a modal is display and it contains a button that displays an alert then clicking on the escape button will close both the modal and the alert.
A better approach would be for the escape key to close the topmost overlay instance across instance types. In the example above, this would close the alert but not the modal.
zIndex for popovers should not be below modals
Most overlay components use a zIndex value of 20000 + a sequential counter. This is used by modals, alerts, etc.
The popover component uses a zIndex value of 10000 + a counter. This means that the popover is always below other overlays. There many instances where it is important to display a popover over things like modals. For example, a modal dialog might show menus or tooltips using the overlay component. With the current approach this can not be done.
Hooks to handle dismiss via escape or backdrop clicks
It is often important to be able to run code in a modal if the user attempts to dismiss the modal via the escape key or clicking on the backdrop.
For example, Google apps such as Contacts display a modal dialog when you edit a contact. If you click on the backdrop or press escape then the modal prompts the user whether they want to save changes. This is also done by Outlook web apps.
In Ionic, if the user clicks on the backdrop then the modal is dismissed without an opportunity to cancel the dismiss or perform other actions.
If modals attempt to use @Listen() to handle the escape key directly they are still not able to prevent the default handling by Ionic.