JedWatson / JedWatson/react-select
Removing the dropdown indicator separator creates space between the clear icon and dropdown indicator icon
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
I just upgraded to react-select the latest version from react-select v1 and I removed the indicator separator and set isClearable to clear values but it's giving me the below UI:
There's a space between dropdown indicator icon and clear icon and this was not there in react-select v1, v1 image below:
- here no space between the clear icon and dropdown icon.
I need to achieve this design in the latest react-select, Does anyone have any idea on how to solve it. I know, they introduced a separator in the latest release but there's an option to remove the separator then there should be an option to remove that space also.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the latest react-select setup with isClearable and the indicator separator removed, then inspect how the clear and dropdown indicators are laid out and styled. Done means removing the separator also removes the unwanted gap, matching the react-select v1 appearance shown in the issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100