clearlydefined / clearlydefined/website
Search input focus outline is visually clipped by adjacent dropdown border radius
- Dominant language
- JavaScript
- Stars
- 32
- Forks
- 35
- PR merge metrics
- No merged PRs in 30d
Description
# Description
When a user clicks into the search input field, the focus/highlight outline is partially obscured where the input connects with the adjacent dropdown selector. The dropdown’s border radius visually overlaps the input focus state, causing the focus indicator to appear broken or cut off in the center section.
This impacts the visual consistency of the component and makes the focused state look incomplete.
---
## Steps to Reproduce
1. Navigate to the “Search Components” section
2. Click inside the search input field
3. Observe the focus/highlight border between the search input and the dropdown selector
---
## Actual Behavior
The search input focus outline is partially hidden/clipped near the dropdown boundary due to the dropdown container’s border radius styling.
---
## Expected Behavior
The search input focus state should render cleanly and continuously without being visually interrupted by the adjacent dropdown component.
---
## Additional Notes
* The issue appears specifically at the junction between the search input and the dropdown selector.
* Likely related to overlapping borders, z-index, overflow handling, or border-radius styling between the connected components.
* Screenshot attached for reference.
Contributor guide
Assessment
This issue has not been assessed yet.