Skip to content

ComboBox/Dropdown (grouped options): Active/hover state persists when mouse enters group header #6119

@mark-tate

Description

@mark-tate

Impacts both Dropdown and ComboBox.

When using a Dropdown to ComboBox with grouped options, moving the mouse from an option to the adjacent group header leaves the previously hovered option in the “active/hover” visual state. The highlight only clears when the cursor moves to another option or exits the dropdown panel. This misleading highlight suggests the option is still hovered even though the pointer is no longer on it.

Expected Behavior

  • The active/hover state should clear as soon as the mouse leaves an option, including when it enters a group header area.
  • Group headers should not cause any option to remain visually active unless the pointer is actually over that option.

Actual Behavior

  • Moving the mouse from:
    • the first item in a group to the group title above it, or
    • the last item in a group to the group title below it
      causes the prior option to stay highlighted.
  • The highlight clears only when moving to another option or outside the dropdown panel.
  • This is reproducible on the public example page.

Steps to Reproduce

  1. Navigate to the public ComboBox grouped options example: https://www.saltdesignsystem.com/salt/components/combo-box/examples#grouped-options
  2. Open the ComboBox dropdown that shows grouped options.
  3. Hover any option at the edge of a group (e.g., first item in a group).
  4. Move the mouse directly into the adjacent group header (above for first item; below for last item).
  5. Observe that the previously hovered option remains highlighted even though the pointer is now on the group header.
  6. Move the pointer to another option or outside the panel and note that the highlight then clears.

Reproducibility

Consistent (occurs every time following the steps above)

Acceptance Criteria

  • Hovering any group header does not leave any option highlighted.
  • Hover state is shown only when the pointer is directly over an option.
  • Moving the pointer from an option to any non-option area (group header, padding, divider) immediately clears the option’s active/hover state.
  • Behavior is consistent across supported browsers/OS.
  • Keyboard navigation and focus styles remain unchanged and correct.

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status

    Green

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions