Close menu when last element is selected

[dz3n]

Hi,

Is it possible to make achieve functionality. I use isMulti, closeMenuOnSelect={false} props for multiple options, but I want to close the menu if there is no more options for select.

Thanks!

[csandman]

Hmm, I gave this some thought but there's no built in way to do this (as far as I know). However, it can be accomplished pretty easily by attaching a ref to the select component and running a .blur() followed by a .focus() when all options are selected. This works because the .focus() method doesn't open the list of options, just focuses the input. However, if you don't care about the input being focused after, you can just drop that part. Here's a basic example of how you could accomplish that:

import { useState, useRef, useEffect } from "react";
import { Select } from "chakra-react-select";
import { colorOptions } from "./data/data";

const FlatOptionsExample = () => {
  const [selectedColors, setSelectedColors] = useState([]);

  const selectRef = useRef(null);

  useEffect(() => {
    if (selectedColors.length === colorOptions.length) {
      selectRef.current.blur();
      selectRef.current.focus();
    }
  }, [selectedColors]);

  return (
    <Select
      ref={selectRef}
      isMulti
      options={colorOptions}
      closeMenuOnSelect={false}
      value={selectedColors}
      onChange={setSelectedColors}
    />
  );
};

And here's a complete example for both a flat list of options along with grouped options written in TypeScript: https://codesandbox.io/s/chakra-react-select-close-when-no-options-left-hunfgc?file=/app.tsx

I added a utility function in there which is meant to help you get the total number of options from a set of grouped or flat options that might look complicated, but its not that bad if you look at the plain JS: https://codesandbox.io/s/chakra-react-select-close-when-no-options-left-vanilla-drjlhs?file=/example.js

[dz3n]

Thank you for the detailed explanation. It works!