non-modal dialog has no z-index

[hannehaugland]

Version number

1.6.0

Description of the bug

When a Dialog opens on top of a Search, the icons in the Search component are seen on top of the Dialog due to their z-index. Expecting Dialog to have the highest z-index with no overlap in this scenario.

Steps To Reproduce

1. Place an open Dialog on top of a Search component
2. Fill the Search with some text to observe that the XMark-icon, as well as the magnifying glass, are overlapping the Dialog

See example in this codesandbox

Additional Information

No response

[Barsnes]

Hi, we'll have a look at this. And for further reference, this only applies to a non-modal dialog, since it does not create it's own stacking context like a modal dialog does.

[Barsnes]

We had a talk internally about this. We'd like to not override the default behaviour of a non-modal dialog. There are a couple reasons for this:

• We don't have a stacking context of z-indicies, so we won't know what to set it to
• Consumers may have higher z-indicies than us

I suggest adding the necessary z-index yourself.

.ds-dialog[data-modal="false"] {
  position: relative;
  z-index: <number>;
}

I won't close this issue