Keep not-allowed cursor on disabled SearchSelect input
Excluding the inner search box from the global disabled rule also dropped its cursor: not-allowed, so the pointer flickered between not-allowed (wrapper) and the text I-beam (input) when moving across the disabled widget. Add disabled:cursor-not-allowed to the search input so the cursor stays consistent. e2e: assert the disabled inner input computes cursor: not-allowed. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -66,9 +66,13 @@ _CONTAINER_CLASS = (
|
|||||||
"has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed"
|
"has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed"
|
||||||
)
|
)
|
||||||
_PILLS_CLASS = "contents"
|
_PILLS_CLASS = "contents"
|
||||||
|
# disabled:cursor-not-allowed matches the wrapper's cursor so hovering across
|
||||||
|
# the whole widget stays consistent — the inner input is excluded from the
|
||||||
|
# global disabled rule (input.css), which would otherwise have set it.
|
||||||
_SEARCH_CLASS = (
|
_SEARCH_CLASS = (
|
||||||
"flex-1 min-w-[8rem] border-0 bg-transparent text-sm text-heading "
|
"flex-1 min-w-[8rem] border-0 bg-transparent text-sm text-heading "
|
||||||
"focus:ring-0 focus:outline-hidden placeholder:text-body"
|
"focus:ring-0 focus:outline-hidden placeholder:text-body "
|
||||||
|
"disabled:cursor-not-allowed"
|
||||||
)
|
)
|
||||||
# top-full anchors the panel to the container's bottom edge: as an absolutely
|
# top-full anchors the panel to the container's bottom edge: as an absolutely
|
||||||
# positioned child of the flex field, its static position would otherwise be
|
# positioned child of the flex field, its static position would otherwise be
|
||||||
|
|||||||
@@ -178,6 +178,9 @@ def test_add_purchase_type_game_disables_related_game_search(
|
|||||||
# disabled-input surface) so the widget reads as one element, not a nested
|
# 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.
|
# box. transparent is mode-independent, so this holds in light and dark.
|
||||||
assert search.evaluate("el => getComputedStyle(el).backgroundColor") == "rgba(0, 0, 0, 0)"
|
assert search.evaluate("el => getComputedStyle(el).backgroundColor") == "rgba(0, 0, 0, 0)"
|
||||||
|
# The inner input carries the same not-allowed cursor as the wrapper, so the
|
||||||
|
# cursor doesn't flicker as the pointer crosses the widget.
|
||||||
|
assert search.evaluate("el => getComputedStyle(el).cursor") == "not-allowed"
|
||||||
|
|
||||||
page.select_option("#id_type", "dlc")
|
page.select_option("#id_type", "dlc")
|
||||||
expect(search).to_be_enabled()
|
expect(search).to_be_enabled()
|
||||||
|
|||||||
@@ -3430,6 +3430,11 @@
|
|||||||
outline-style: none;
|
outline-style: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.disabled\:cursor-not-allowed {
|
||||||
|
&:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
.has-\[\:disabled\]\:cursor-not-allowed {
|
.has-\[\:disabled\]\:cursor-not-allowed {
|
||||||
&:has(*:is(:disabled)) {
|
&:has(*:is(:disabled)) {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|||||||
Reference in New Issue
Block a user