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
- Navigate to the “Search Components” section
- Click inside the search input field
- 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.
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
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