JedWatson / JedWatson/react-select
Option background colors not filling very long labels
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
https://codesandbox.io/p/sandbox/codesandboxer-example-forked-4z9lkz?file=%2Fexample.tsx%3A16%2C1
For very long options (or very small select boxes), the option background color does not extend into the right in the case where a horizontal scroll is needed. The selected and focused options' background is only as wide as the select box is, before scrolling.
Try the sandbox above or recreate it:
- Create a simple select box that has a very long option label
import React from "react";
import Select from "react-select";
export default () => (
<Select
options={[
{
label:
"longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong",
value: "verylong",
},
]}
/>
);
- Run it and open the dropdown by clicking the select box.
- Scroll to the right to see the rest of the label.
- See the white background
The expected behaviour is that the background color extends all the way to the right, to encompass the whole label.
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
Open the linked CodeSandbox and inspect example.tsx around line 16. Reproduce the long-label select, open the dropdown, and scroll horizontally to observe where the selected or focused background stops. Done means the background extends across the full long option label, including the horizontally scrolled area.
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
- Clearly specified
- Newbie friendliness
- 62/100