Toast messages are hiding under dialog backdrop about baklava HOT 4 CLOSED

This is a known limitation of using native Dialog element because Dialog element renders on top-layer, which you can not override it via z-index values. Technically Popover API is on the way which will fix this issue, but until that time, I think we may check for a workaround for this.

Currently our dialog supports older browsers that don't support dialog element. We make that check automatically and use a polyfilled version instead with that small decision point:

  private get hasHtmlDialogSupport() {
    return !!window.HTMLDialogElement;
  }

Maybe we can consider making this a property that you can manually set outside like:

@property({ type: Boolean })
levelled = !window.HTMLDialogElement;

So, whenever a popover opens within a browser that doesn't support Popover API, dialog that is already visible can be switched to levelled variant which will convert dialog to a version that respects z-index rules. But:

• We need to be careful about UX effects of this. If this switch causes a rerender on dialog content, that would be awful for use-cases like filling a form inside dialog, or reading a long text, since a new notification will interrupt these badly.
• If we set this true by default in a project, then we'll miss the opportunities that native dialog element provides us and we can not easily implement in a custom dialog element, like avoiding cropped dialog because of parent style rules and keyboard navigation trap.

Please feel free to share your opinions. @Enes5519

PS: levelled name could be switched with a better option.

from baklava.

It is healthiest to do it this way, different ways are not ready yet, so we can pass prop in this way.

from baklava.

🎉 This issue has been resolved in version 2.2.0-beta.9 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from baklava.

🎉 This issue has been resolved in version 2.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from baklava.