Multivalue dropdown does not close on outside click after selecting a value

[helenalissenko]

I have two multi value dropdowns as part of a bigger filter component. The issue I am encountering is when you open one of the dropdowns, select one or more values and click outside of it, then the dropdown does not close.

If you click outside of the dropdown without selecting any value then it closes as expected. If you select a value and close the dropdown by clicking in the control and open it again, then it closes on outside click.

Code to reproduce the issue is here: https://codesandbox.io/s/nervous-wildflower-evmi0z

Does anyone have any idea why this is happening?

[manjushsh]

Hi @helenalissenko,
With multiValue, I could make it work.
Example on Codesandbox

Code for dropdown.tsx:

import Select, { components, OptionProps, StylesConfig } from "react-select";
import { IOption } from "./App";

const customStyles: StylesConfig = {
  control: (base, state) => ({
    ...base,
    borderRadius: 0,
    "&:hover": { borderColor: "#212121" },
    borderColor: "#212121",
    border: `1px solid ${state.menuIsOpen ? "#212121" : "#D7D7D7"}`,
    boxShadow: "none"
  }),
  valueContainer: (base) => ({
    ...base,
    height: 48,
    paddingLeft: 8
  }),
  menu: (base) => ({
    ...base,
    borderRadius: 0,
    marginTop: 6,
    border: "1px solid #212121"
  }),
  menuList: (base) => ({
    ...base,
    paddingTop: 0,
    paddingBottom: 0
  }),
  multiValue: (base) => ({
    ...base,
    background: "#FFF",
    fontSize: "1.25rem"
  }),
  option: (base, state) => ({
    ...base,
    color: "#212121",
    display: "flex",
    alignItems: "self-start",
    "&:hover": { backgroundColor: "#F5F5F5" },
    backgroundColor: state.isSelected ? "#F5F5F5" : "white",
    ":active": {
      ...base[":active"],
      backgroundColor: "#F5F5F5"
    }
  })
};

const Dropdown = ({
  items,
  selectedItems,
  setSelectedItems
}: {
  items: IOption[];
  selectedItems: IOption[];
  setSelectedItems: (value: IOption[]) => void;
}) => {
  const CustomOption = ({ data, isSelected, ...props }: OptionProps) => (
    <components.Option data={data} isSelected={isSelected} {...props}>
      <div>
        <span role="img" aria-label="location">
          📍
          {(data as any).label}
        </span>
        {isSelected && " ✔"}
      </div>
    </components.Option>
  );

  const MultiValue = ({ index, getValue, ...props }) => {
    const maxToShow = 1;
    const values = getValue() as IOption[];

    return index < maxToShow ? (
      <components.MultiValue {...props}>
        <span role="img" aria-label="location" style={{ padding: "0.5rem" }}>
          {values.length === 1
            ? `📍 ${values[0]?.label}`
            : `🔍 ${values.length} Selected`}
        </span>
      </components.MultiValue>
    ) : index === maxToShow ? (
      ""
    ) : null;
  };

  return (
    <div>
      <Select
        id="location-dropdown"
        closeMenuOnSelect={false}
        isClearable={true}
        isMulti
        hideSelectedOptions={false}
        options={items}
        styles={customStyles}
        placeholder={"Select countries"}
        value={selectedItems}
        onChange={(options) => setSelectedItems(options as IOption[])}
        components={{
          Option: CustomOption,
          IndicatorSeparator: () => null,
          MultiValueRemove: () => null,
          MultiValue
        }}
      />
    </div>
  );
};

export default Dropdown;