How can I hide the menu when there are No results found on search query.

[Y1a2s3h4]

Hide menu when no options found.

how can we implement this functionality without using filterOptions props ?

[manjushsh]

Hi @Y1a2s3h4, Did you try passing noOptionsMessage?
Setting it to noOptionsMessage={() => null} should hide menu if no options.

Example codesanbox: https://codesandbox.io/p/sandbox/react-select-examples-6picqk
file: \src\hide-menu-no-option.tsx

Code

import Select from "react-select";
import type React from "react";

const HideIfNoOptions = ({ selectedOption, handleChange, options }) => {
  return (
    <>
      <h2>Hide menu if no option</h2>
      <Select
        isMulti
        value={selectedOption}
        onChange={handleChange}
        options={options}
        noOptionsMessage={() => null}
      />
    </>
  );
};

export default HideIfNoOptions;