Select: wrong secondary variant invalid background color when focused

Problem

When Select.Root is rendered with variant="secondary" and the field is invalid (isInvalid), the trigger background renders with the primary (white/--color-field-focus) background instead of the expected secondary (grey/--default) background.


Root Cause: CSS Specificity

In @heroui/styles, the invalid state rule nested inside .select__trigger compiles to specificity 0,3,0:

/* specificity 0,3,0 */
.select[data-invalid="true"] .select__trigger,
.select[aria-invalid="true"] .select__trigger {
  background-color: var(--color-field-focus); /* primary/white */
}

The secondary variant rule only has specificity 0,2,0:

/* specificity 0,2,0 */
.select--secondary .select__trigger {
  background-color: var(--select-trigger-bg); /* --default = grey */
}

Since 0,3,0 > 0,2,0, the invalid state always overrides the secondary background β€” the secondary invalid override is missing.

Please authenticate to join the conversation.

Upvoters
Status

In Review

Board
πŸ›

Issues

Date

2 days ago

Author

NicolaCastellani

Subscribe to post

Get notified by email when there are changes.