Problem with scrims when multiple dialogs are opened

[vdegenne]

What is affected?

Component

Description

When opening multiple dialogs, scrim are not layered properly resulting in dialogs opening in top of each other with no clear way to discern boundaries.

Reproduction

https://lit.dev/playground/#gist=69e00d591947f65c8b9b19860867d08b

Workaround

Workaround proposed by @sorvell :

import {MdDialog} from '@material/web/dialog/dialog.js';

MdDialog.addInitializer(async (instance: MdDialog) => {
  await instance.updateComplete;
  instance.dialog.prepend(instance.scrim);
  instance.scrim.style.inset = 0;
  instance.scrim.style.zIndex = -1;

  const {getOpenAnimation, getCloseAnimation} = instance;
  instance.getOpenAnimation = () => {
    const animations = getOpenAnimation.call(this);
    animations.container = [...animations.container, ...animations.dialog];
    animations.dialog = [];
    return animations;
  };
  instance.getCloseAnimation = () => {
    const animations = getCloseAnimation.call(this);
    animations.container = [...animations.container, ...animations.dialog];
    animations.dialog = [];
    return animations;
  };
});

Is this a regression?

Yes. This used to work, but now it doesn't.

Affected versions

1.3.0

Browser/OS/Node environment

Chrome/Firefox

[vdegenne]

As a side note, this issue is even more significant because dialogs can usually be lazy loaded; Using the workaround above means that the code for <md-dialog> will be loaded in the main bundle (unless the code for this fix is imported everywhere where dialogs are used which makes managing development in a multi-dialog app really cumbersome).