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:
2026-06-19 18:35:28 +02:00
parent 885e92b775
commit b49b5f1cc3
4 changed files with 15 additions and 5 deletions
+4
View File
@@ -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()