JedWatson / JedWatson/react-select

Option background colors not filling very long labels

Open
#6,020 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
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:

  1. 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",
      },
    ]}
  />
);
  1. Run it and open the dropdown by clicking the select box.
  2. Scroll to the right to see the rest of the label.
  3. See the white background

The expected behaviour is that the background color extends all the way to the right, to encompass the whole label.
Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.