Cannot use Angular Combobox in Core Modal.
jrmycanady opened this issue · 4 comments
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
- Create a core modal.
- Place an angular combobox in it.
- Click the options.
- 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 Core
- Clarity Angular/UI
Clarity version:
- v3.x
- v4.x
- v5.x
Framework:
- Angular
- React
- Vue
- Other:
Framework version:
Angular 13
Device:
- Type: MacBook
- OS: macOS 12.1
- Chrome
- Version 97.0.4692.71
Additional notes
Overriding the z-index property of the .clr-popover-content class with the value of 1000001 "corrects" the issue.
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?
@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?
@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):
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.