Make disabled SearchSelect read as one element
The disabled widget showed two clashing surfaces in dark mode: the wrapper
(faded via has-[:disabled]) plus the inner search input, which picked up the
global disabled-input fill from common/input.css
(`form input:disabled { background: neutral-secondary-strong }`). That rule is
unlayered, so it beat any utility override on the input.
Exclude the SearchSelect's inner search box from that global rule
(`:not([data-search-select-search])`) so it stays transparent — the wrapper is
then the single faded surface. Standalone inputs (e.g. the Name field) keep
their distinct disabled surface, unchanged.
e2e: assert the disabled inner input computes transparent background (one
element), alongside the existing wrapper-opacity check.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -174,6 +174,10 @@ def test_add_purchase_type_game_disables_related_game_search(
|
||||
expect(search).to_be_disabled()
|
||||
# The component greys itself via has-[:disabled] when the input is disabled.
|
||||
assert wrapper.evaluate("el => getComputedStyle(el).opacity") == "0.5"
|
||||
# The disabled inner input stays transparent (excluded from the global
|
||||
# disabled-input surface) so the widget reads as one element, not a nested
|
||||
# box. transparent is mode-independent, so this holds in light and dark.
|
||||
assert search.evaluate("el => getComputedStyle(el).backgroundColor") == "rgba(0, 0, 0, 0)"
|
||||
|
||||
page.select_option("#id_type", "dlc")
|
||||
expect(search).to_be_enabled()
|
||||
|
||||
Reference in New Issue
Block a user