Using custom <components.Input /> component not allowing dropdown to close when clicking outside component

[cjkenney]

react-select version: 5.6.1

I'm trying to overwrite the base <input> element field "auto-complete" to have the value "off" in order to stop the Chrome auto-complete suggestions from appearing. When replacing the <components.Input /> component, the options dropdown does not disappear when clicking outside the component.

I am using a Redux store to persist the state of the <Select /> component.

import Select, {components} from "react-select";

return ["category1", "category2"].map(category => {
  const Input = props => (<components.Input {...props} autoComplete="off" />);

  return (
    <Select 
      isMulti={true}
      options={[{label: "Label 1", value: "1"}, {label: "Label 2", value: "2"}]}
      value={reduxStore[attributeCategory.categoryName]}
      onChange={selected => {dispatch({type: 'SET_MULTISELECT', payLoad: {category: category, value: selected}})}}
      closeMenuOnSelect={false}
      components={{Input}}
    />
  );
);

When I remove the "components" prop from the <Select /> component, the dropdown works as expected (closes when clicking outside component).

[helenalissenko]

I had a similar issue where multivalue dropdown would not close on outside click with custom components and it was driving crazy for a couple of day. What worked for me was declaring the custom components as functions outside of the method which renders the Select. So something like this should make you Select work as expected

import Select, {components} from "react-select";

const Input = props => (<components.Input {...props} autoComplete="off" />);

const CategoryFilters = () => {
  return ["category1", "category2"].map(category => {
    // previously the Input was here
    return (
      <Select 
        isMulti={true}
        options={[{label: "Label 1", value: "1"}, {label: "Label 2", value: "2"}]}
        value={reduxStore[attributeCategory.categoryName]}
        onChange={selected => {dispatch({type: 'SET_MULTISELECT', payLoad: {category: category, value: selected}})}}
        closeMenuOnSelect={false}
        components={{Input}}
      />
    );
  );
}

Hope this helps 🙂

[RambousekTomas]

On version 5.5.4 the issue is still pressent, had to use useMemo to memorize output of custom functions which provides component.