Give SearchSelect the same border + focus as native inputs

The SearchSelect wrapper had no border and no focus styling, so it looked unlike
a native input (which has border-default-medium → border-brand on focus). Add
border-default-medium + focus-within:border-brand/ring to the shared container
class — focus-within because the focusable element is the inner search box. This
also makes filter-bar comboboxes consistent with the other filter inputs, which
already have borders.

e2e asserts the wrapper border matches a native input's at rest and turns brand
on focus.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-20 08:03:08 +02:00
parent 29ba3e66e9
commit 9c25f02ddb
3 changed files with 37 additions and 3 deletions
+24
View File
@@ -154,6 +154,30 @@ def test_add_purchase_related_game_is_flat_game_search(
expect(related).to_have_attribute("data-search-url", "/api/games/search")
def test_searchselect_border_matches_native_input(
authenticated_page: Page, live_server
):
"""A SearchSelect's wrapper has the same border as a native input, and turns
brand on focus (via focus-within on the wrapper, since the inner search box
is what's focused)."""
page = authenticated_page
page.goto(f"{live_server.url}{reverse('games:add_purchase')}")
price = page.locator("#id_price") # always-enabled native input
wrapper = page.locator("#id_platform")
search = page.locator("#id_platform [data-search-select-search]")
border = "el => getComputedStyle(el).borderColor"
rest = price.evaluate(border)
assert wrapper.evaluate(border) == rest # same border at rest
search.focus()
focused_wrapper = wrapper.evaluate(border)
price.focus()
focused_input = price.evaluate(border)
assert focused_wrapper == focused_input # same brand border on focus
assert focused_wrapper != rest # focus actually changes it
def test_add_game_syncs_sort_name_from_name(authenticated_page: Page, live_server):
"""Typing into Name live-fills Sort name (sync bound to the add form, not
the navbar logout form which is the first <form> on the page)."""