Skip to content

Menu/option hover styles are not guarded with @media (hover: hover) #411

Description

@czarandy

Problem

Menu and option hover styles use bare _hover, which compiles to :hover with no hover-capability guard. On touch devices, the tapped item keeps its hover background until the next tap elsewhere (sticky hover).

Unguarded sites include src/components/DropdownMenu/DropdownMenuItem.recipe.ts:14, src/components/Select/Select.recipe.ts:52, src/components/MultiSelect/MultiSelect.recipe.ts:51, and the AutocompleteInput option styles.

The repo already uses the @media (hover: hover) idiom in six files — e.g. CodeBlock.recipe.ts:99, Table.recipe.ts:198,225, Slider.recipe.ts:63, TreeViewItem.recipe.ts:139 — the menus were just missed.

Expected

No sticky hover state on touch: hover styles apply only on devices that actually support hover.

Suggested fix

Wrap the menu/option _hover styles in the existing @media (hover: hover) pattern (or a shared Panda condition so it can't be forgotten again). Verify in Storybook with touch emulation.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingsmallApproximately small amount of work

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions