Programmatically close react-select menu

Question

React-select default behavior is to have the menu pop open when the input value is empty. I want to modify this behavior so that when the input is empty, whether before a user has typed anything or the user has backspaced to get to the empty state, the menu will be closed.

I could not find any prop that enables this behavior, so I thought to do it programmatically, by calling some function that closes the menu in onInputChange. Something like:

onInputChange={(inputValue) => {
      this.setState({
        inputValue,
      });
      this.selectRef.closeMenu();
    }}

I tried using blur() on the Select ref but it just blurred the input without closing the menu, definitely not the behavior I'm looking for.

Is there a prop or function that's exposed that can fulfill my needs?

Answer 1

I kept the open state separately

const [open, setOpen] = useState(false);

<Select
  menuIsOpen={open}
  onMenuOpen={() => setOpen(true)}
  onMenuClose={() => setOpen(false)}
/>

and set false when I want to close it. In this case, like this

onInputChange={(text) => {
  if (text === '') {
    setOpen(false);
  }
}}