React select remove selected option on search

Question

is there a way to always show the selected option on the menu even after searching for some thing else

here is the code I used

import React from "react";
import Select from "react-select/async";
const CheckboxDropdown = ({
  options,
  defaultValue,
  loadOptions,
  handleCheckboxSelect,
}) => {
  const selectDefaultValue = defaultValue;
  
  return (
    <div className="flex">
      <Select
        defaultMenuIsOpen
        defaultOptions={options}
        cacheOptions
        loadOptions={loadOptions}
        options={options}
        defaultValue={defaultValue}
        isMulti
        onChange={handleCheckboxSelect}
        noOptionsMessage={() => "No options available"}
        className="w-full"
        isClearable={false}
        placeholder="Type site name..."
      />
    </div>
  );
};
export default CheckboxDropdown;

Answer 1

react-select has a prop called filterOption where you can pass custom filter logic.

Check this CodeSandbox link to see my implementation.

import React, { useState } from "react";
import "./styles.css";
import Select from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" },
  { value: "Apple", label: "apple" },
  { value: "Orange", label: "orange" }
];

export default function App() {
  const [selectedOption, setSelectedOption] = useState([]); //add initial state

  const handleChange = (selectedOption) => {
    setSelectedOption(selectedOption);
  };

  const filterOptions = (candidate, input) => {
    if (input) {
      if (candidate.label.toLowerCase().includes(input.toLowerCase()))
        return true;
      if (
        selectedOption.some((opt) => {
          if (opt.value === candidate.value) return true;
          else return false;
        })
      )
        return true;
      return false;
    }
    return true;
  };

  return (
    <div className="App">
      <Select
        defaultValue={{ value: "chocolate", label: "Chocolate" }} // default value must be like this.
        value={selectedOption}
        onChange={handleChange}
        options={options}
        isMulti
        hideSelectedOptions={false}
        isSearchable
        filterOption={filterOptions}
      />
    </div>
  );
}