cssreactjsdropdownreact-selectreact-async

How to keep the selected option form dropdown still visible in dropdown

I have a dropdown of 3 items and if I select one of the items, the dropdown displays remaining 2 items, so I wanted it to display all 3 despite of the selected values.

reference dropdown As per the reference image, polo shirt is selected so I want it to still appear as option in the dropdown, with some background so it appears selected.

Solution

  • You can set the hideSelectedOptions={false} prop on your selector. That will keep selected items in your dropdown.

    Here's a short sample doing just that

    const options = [
  { value: "polo", label: "Polo shirt" },
  { value: "jeans", label: "Jeans" },
  { value: "top", label: "Top" },
];

export const Selector = () => {
  return <Select options={options} isMulti hideSelectedOptions={false}  />;
};