JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.57k stars 4.12k forks source link

isMulti will not hide the selected options from menu #5844

Open lsan31296 opened 8 months ago

lsan31296 commented 8 months ago

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

vijaygomathinayagam commented 8 months ago

Hi @lsan31296,

commenting the below line in ReportingTool.js fixes the issue setFormState({ ...formState, accounts: [...apxPortCodeArr] });