Ionic 5 - toast message button not clickable when displayed over the map

[jpogorzelski]

I'm submitting a ... (check one with "x")

• [ ] question
• [X] any problem or bug report

OS: (check one with "x")

• [X] Android
• [X] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

cordova-androidx-build 1.0.4 "cordova-androidx-build"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.8.0-20200709-2008 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 6.0.0 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

@ionic-native/core : "~5.31.1"
@ionic-native/google-maps : "~5.5.0"

Current behavior: When a toast message is displayed over a map, the button to close the toast is not clickable. Moreover, it seems that click event is caught by the map itself - e.g. double click on 'OK' toast button causes map to zoom. Toast button is clickable again when navigated back to previous page by pressing hardware back button in Android.

This look like regression as there was such a bug before (regarding Ionic v3 however): #1991

Expected behavior: Toast is dismissed when clicked the OK button on the page with map.

Screen capture or video record:

https://user-images.githubusercontent.com/8654187/106746365-bbc36c80-6622-11eb-8ea8-6ce9c09ca1fd.mp4

Related code, data or error log (please format your code or data):

https://github.com/jpogorzelski/ionic5-maps-toast-test

[jpogorzelski]

When I looked into fix for #1991, I realized that here the problem can be simiar, but not handled on the second side, i.e. Ionic's. The workaround for this is adding following snippet to global.scss file:

ion-toast {
  pointer-events: auto;
}