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=d125eb4ef8a6086b907630c9eb28b6e2

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).