JedWatson / JedWatson/react-select

isMulti will not hide the selected options from menu

Open

#5,844 opened on Jan 10, 2024 2 comments 1 reaction 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

Hello, currently I'm attempting to use React-Select package and using a multi-select dropdown. It seems that the selected options will not hide or get filtered out in the menu. I have simulated the code in the following sandbox link:
https://codesandbox.io/p/sandbox/react-select-ismulti-will-not-filter-out-selected-options-from-menu-3m26qc?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clr86khpo00063j6f6rrfl2tq%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clr86khpn00023j6fgqt4hzy7%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clr86khpo00033j6flbzjj98z%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clr86khpo00053j6ftoq7rq16%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clr86khpn00023j6fgqt4hzy7%2522%253A%257B%2522id%2522%253A%2522clr86khpn00023j6fgqt4hzy7%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clr86khpo00053j6ftoq7rq16%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clr86khpo00043j6fr1esnh05%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clr86khpo00053j6ftoq7rq16%2522%252C%2522activeTabId%2522%253A%2522clr86khpo00043j6fr1esnh05%2522%257D%252C%2522clr86khpo00033j6flbzjj98z%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clr86khpo00033j6flbzjj98z%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

The following video snippet is what I am experiencing:

https://github.com/JedWatson/react-select/assets/113560203/68b2a05e-f4bf-4952-babe-831d30f1bb43

The following video snippet is the desired experience:

https://github.com/JedWatson/react-select/assets/113560203/26a780e1-bd76-4c5d-bd1b-13e53d913279

Contributor guide

Open the contributing 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

Start by reproducing the issue in the linked CodeSandbox with the multi-select example, then compare it with the desired-behavior video. Trace the selected-option filtering behavior and verify that options already selected are hidden from the menu while unselected options remain available.

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

A short digest of beginner-friendly GitHub issues.