search

vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
164 stars 42 forks source link

Selection in multiple "select" is invisible when out of focus #224

Open Jinnie opened 1 year ago

Jinnie commented 1 year ago

How to reproduce

This problem is not visible in Safari. Only in Chrome or Firefox.

Steps to reproduce the behavior:

  1. Go to https://storybook.core.clarity.design/?path=/docs/stories-select--multiple in Chrome
  2. Select several options
  3. Click somewhere outside the input
  4. The selection is not visible anymore
  5. If you click on the label, select gets focus and the selection is visible again.

Expected behavior

When out of focus, the selection should be dim, but visible. As in Safari

Versions

Clarity project:

Framework version: ie: Angular 11

Device:

Additional notes

Add any other notes about the problem here.

niranjansooda commented 1 year ago

https://user-images.githubusercontent.com/11557021/230874459-63eba4e6-417f-4023-a5e6-1358226a1476.mov

select issue in video format

MTstomachTM commented 1 year ago

Inspecting the element lead me to believe the cds-select component style is the culprit.

cds-select option {
  background: var(--cds-alias-object-container-background,var(--cds-global-color-white,#fff));
  ...

When I disable this rule, the selected option got applied the related browser styling.