Skip to content

Incorrect extra number of overlays with multiple dialog #2324

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
guojenman opened this issue Dec 21, 2016 · 5 comments
Closed

Incorrect extra number of overlays with multiple dialog #2324

guojenman opened this issue Dec 21, 2016 · 5 comments

Comments

@guojenman
Copy link

Bug:

What is the expected behavior?

When instantiating multiple dialogs, there should be only one overlay and update it's z-index so that it's over the previous dialog

What is the current behavior?

One overlay is create for each dialog and all of the z-index are always 1 so that it never hides the previous still opened dialog

What are the steps to reproduce?

http://plnkr.co/edit/hQKwfp?p=preview

click open modal 1 on main app + click open modal 2 in opened dialog

  1. you can still interact with dialog 1
  2. you see the overlay darken because there are now 2 overlays

What is the use-case or motivation for changing an existing behavior?

  1. By creating a new overlay for each opened dialog, it darkens then look of the overlay for each on that is opened
  2. Should not be able to interact with dialog 1 until dialog 2 is closed, currently you can still click on "open modal 2" from dialog 1 which keeps creating dialog 2s and overlay keeps getting darker and darker for each overlay instantiated

Which versions of Angular, Material, OS, browsers are affected?

Material: 2.0.0-alpha.11-3
Angular: All

Is there anything else we should know?

@crisbeto
Copy link
Member

I'm not sure I agree that only one dialog should be open at a time. That being said, the backdrop stacking issues should be solved with #2276

@guojenman
Copy link
Author

guojenman commented Dec 21, 2016

@crisbeto Overlay stacking described in #2276 may be close to what I'm saying, though after cloning from master and running "gulp build:components" and rebuilding my app to use that version, I see no difference with the overlays in my dialogs (2 opened sequentially and left opened)

  1. both overlays were still under both dialogs
  2. because there were two overlays, they looked darker

IMO, both of these behavior are not correct. Maybe I'm not building from source correctly to see the change?

There should be only 1 overlay no matter how many dialogs are opened. If for technical reasons we need to have 1 overlay per dialog, then all but the last overlay should have opacity of 0 so they don't ad to the darkness of the overlay.

@crisbeto
Copy link
Member

Here's what it looks like for me on master @guojenman:

1

Regarding the overlays looking darker, I think that my example illustrates why it's necessary: when you have multiple dialogs and one doesn't overlap the other completely, you need some kind of indication that the lower one isn't clickable (hence the darkening). It might make sense to have a config option to be able to disable it, though.

@guojenman
Copy link
Author

@crisbeto your build looks like the right behavior. Thank you.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants