search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 763 forks source link

Cannot use Angular Combobox in Core Modal. #6585

Closed jrmycanady closed 2 years ago

jrmycanady commented 2 years ago

Describe the bug

Angular Combobox is incompatible with the core Modal web component. The selection options are under the modal. The z-index of the selection options is only 5000 while the modal is 1000001.

How to reproduce

  1. Create a core modal.
  2. Place an angular combobox in it.
  3. Click the options.
  4. The options are displayed under the modal.

Expected behavior

The options are displayed in a way the user can view and select them with the mouse.

Versions

Clarity project:

Clarity version:

Framework:

Framework version: Angular 13

Device:

Additional notes

Overriding the z-index property of the .clr-popover-content class with the value of 1000001 "corrects" the issue.

Jinnie commented 2 years ago

This is a valid bug to me, as we want Core and Clarity Angular components to be compatible. But I can't say where it needs to be fixed now, at Core or at Clarity NG. It can also surface in other combinations with Angular components with popovers.

CC @mathisscott Scott, do we have any previous thoughts and ideas how to approach the problem of mixing Core and other systems' popovers?

jrmycanady commented 2 years ago

@ashleyryan Could I understand why this was closed? Has it been corrected or is the plan to not support full Core and Clarity Angular compatibility?

ashleyryan commented 2 years ago

@jrmycanady Apologies. I'm cleaning up this repository, which has been archived (temporarily unarchived for cleanup).

Can you recreate the issue in one of the new repositories (most likely Core):

github-actions[bot] commented 1 year ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.