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;

CodePudding user response：

Try this code it's work

const App = () => {
  const [selectedOption, setSelectedOption] = useState();

  const handleChange = (selectedOption) => {
    setSelectedOption(selectedOption);
  }
  const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ];

  return (
    <div>
      <Select
        isMulti
        hideSelectedOptions={false}
        defaultValue={{ value: 'chocolate', label: 'Chocolate' }} // default value must be like this.
        value={selectedOption} //You forgot pass this  parameter
        onChange={handleChange}
        options={options}
      />
    </div>
  );
}

export default App;

CodePudding user response：

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();

  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>
  );
}