Filter for Datagrid in cds-modal is obscured

[grahamford]

Describe the bug

We've been moving over the Cds versions of components but I have a need to display some data in a Datagrid. When I have a Clr Datagrid in a Cds Modal and column filters are enabled, the filter boxes are displayed behind the modal content and are inaccessible.

I've tried adding a high z-index to the filter with the following but although the filter is now visible, you can't enter text into the input box.

.datagrid-filter {
  z-index: 1000001;
}

How to reproduce

Stackblitz: https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-thpyqk?file=src/app/app.component.ts

Steps to reproduce the behavior:

1. Click on the button titled "Click Me"
2. Click on the filter icon in the header of "User ID"
3. The box that should display the filter input box displays behind the modal.

Expected behavior

The filter input box should appear in front of the modal content and the input box should accept text input.

Versions

Clarity version:

• [x] v12.x
• [x] v13.x
• [ ] Other:

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version: Angular 12, 13

Device:

• Type: MacBook
• OS: macOS
• Browser: Vivaldi/Chrome
• Version: 5.3.2679.68

[Jinnie]

The cds modals use different z-index values, compared to clr-modals. I agree we should synchronize both systems. I am transferring this bug to the vmware-clarity/core repo.

[ashleyryan]

clarity-ng has a dependency on Core and not the other way around, so Core is never going to care about NG's z-indexes.

HOWEVER, I think Core has it's own positioning logic (that doesn't use z-index if I remember correctly) and we obviously need to make sure it more broadly works with positioned elements with zindexes