clearlydefined / clearlydefined/website

Search input focus outline is visually clipped by adjacent dropdown border radius

Open
#1,131 0 comments 0 reactions 0 assignees View on GitHub
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.

Image

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.