diff --git a/packages/emcn/src/components/combobox/combobox.dom.test.tsx b/packages/emcn/src/components/combobox/combobox.dom.test.tsx index a722d3229f5..9885c184baf 100644 --- a/packages/emcn/src/components/combobox/combobox.dom.test.tsx +++ b/packages/emcn/src/components/combobox/combobox.dom.test.tsx @@ -10,6 +10,7 @@ * that it does, in both directions. */ import { act, type ReactNode, useState } from 'react' +import { ChipCombobox } from '@sim/emcn' import { createRoot, type Root } from 'react-dom/client' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { InsideModalContext } from '../modal/modal' @@ -92,6 +93,27 @@ describe('Combobox onOpenChange', () => { expect(control.classList.contains('pr-10')).toBe(false) }) + it.each(['label', 'icon', 'none'] as const)( + 'preserves editable chip text visibility with %s overlay', + (overlay) => { + render( + }] : OPTIONS + } + editable + value='alpha' + overlayContent={overlay === 'label' ? Formatted Alpha : undefined} + inputProps={{ className: 'text-[var(--text-primary)]' }} + /> + ) + + const control = trigger() + expect(control.classList.contains('text-transparent')).toBe(overlay !== 'none') + expect(control.classList.contains('text-[var(--text-primary)]')).toBe(overlay === 'none') + } + ) + it.each([false, true])( 'puts the field name and validation ARIA on the interactive control (editable=%s)', (editable) => { diff --git a/packages/emcn/src/components/combobox/combobox.tsx b/packages/emcn/src/components/combobox/combobox.tsx index 00034f40b2e..d93c70ebc33 100644 --- a/packages/emcn/src/components/combobox/combobox.tsx +++ b/packages/emcn/src/components/combobox/combobox.tsx @@ -800,11 +800,11 @@ const Combobox = memo( {...inputProps} className={cn( 'w-full pr-10 transition-colors', - (overlayContent || SelectedIcon) && 'text-transparent caret-foreground', SelectedIcon && !overlayContent && 'pl-7', open && 'focus-visible:border-[var(--border-1)]', className, - inputProps?.className + inputProps?.className, + (overlayContent || SelectedIcon) && 'text-transparent caret-foreground' )} role='combobox' aria-expanded={open}