carbon-design-system/carbon

[Bug]: Dropdown selector shows unexpected border on selected item

Open

#20,774 opened on Oct 22, 2025

View on GitHubContributor guide
 (1 comment) (0 reactions) (0 assignees)JavaScript (1,733 forks)batch import
afrohackscomponent: dropdownhacktoberfestneeds: community contributionpackage: @carbon/reactrole: dev 🤖status: help wanted 👐type: bug 🐛

Repository metrics

Stars
 (7,442 stars)
PR merge metrics
 (Avg merge 9d 14h) (106 merged PRs in 30d)

Description

Package

@carbon/react

Browser

No response

Package version

v1.93

React version

No response

Description

In the React Dropdown component, there’s an unwanted border when the selector is selected. Below is an image to illustrate the issue.

[!NOTE]
The ComboBox component can be used as a reference, as it follows the correct behavior. You can also check the documentation.

Expected:

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-dropdown--default

Steps to reproduce

  • Go to React Storybook > Dropdown > Default
  • Access the Dropdown, select an item, then press the arrow key up or down
  • If you look closely at the item (when the focus leaves it), there's a border on top, it doesn't appear fully selected.

https://github.com/user-attachments/assets/9811dfb7-80e7-465f-894d-ea1e6cad5f09

Suggested Severity

Severity 4 = Unrelated to a user task, has a workaround or does not need a workaround.

Application/PAL

No response

Code of Conduct

Contributor guide

Research direction
Investigate the CSS for the Dropdown component's selected state, specifically the border that appears when an item is selected and focus is moved. Compare with the ComboBox component's behavior to identify the difference in styling logic. Look for pseudo classes like :focus, :focus within, or :focus visible that might cause the unexpected border.
Tech stack
reactcss
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75