Recently, I delved into the world of Angular and started working on a project that utilizes the Angular Material library. During my journey, I stumbled upon some peculiar behavior while using mdTooltip and mdDialog requests within an md-grid-list. This raised curiosity in me to uncover the root cause behind this behavior.
Upon closer inspection, I noticed that when hovering over a tooltip or triggering a dialog on an md-grid-tile element within an md-grid-list, they refused to close properly. Even after attempting to close them, the dialog content seemed stubbornly persistent on the page despite the background opacity reverting to normal. Quite perplexing, isn't it?
To investigate further, I decided to modify an Angular startup plunker where I successfully replicated this bug. If you're interested in seeing it for yourself, here's the link: https://embed.plnkr.co/8zbydmXP3PkTrmft0G0A/
What intrigued me even more was the fact that, within the plunk, I included a separate button to call the openDialog method which surprisingly didn't work either. However, removing the md-grid-list tags from the plunk miraculously resolved the issue! Don't take my word for it, visit the provided link and witness this strange behavior firsthand.
Given my limited knowledge of Angular and Material, any insights or advice would be greatly appreciated as I strive to understand the intricacies of these technologies. Thank you in advance!