[v2] Custom Components, closeMenuOnSelect=false click outside do not close menu

While implementing custom menu with option closeMenuOnSelect=false click outside do not close menu. Issue is probably cause lose of input focus.

• Open menu and click outside, menu close as expected
• Open menu, clear all items and click outside, menu close as expected
• Open menu, select option and click outside menu is still open
• Open menu, clear any option and click outside menu is still open

const props = {
           ...
           components: {
                Menu: ({options: renderedOptions, selectOption, selectProps, innerProps}) => (
                    <DropdownMenu className={`${classNamePrefix}__menu`} {...innerProps}>
                        {
                            renderedOptions && renderedOptions.length > 0
                                ? (renderedOptions.map((option) => (
                                    <DropdownItem
                                        key={option[VALUE_KEY]}
                                        tag="div"
                                        onClick={() => selectOption(option)}
                                        className={classnames(`${classNamePrefix}__menu-option`, {
                                            [`${classNamePrefix}__menu-option_is-selected`]: selectProps.value && (
                                                Array.isArray(selectProps.value)
                                                    ? selectProps.value.some((selectedValue) => selectedValue[VALUE_KEY] === option[VALUE_KEY])
                                                    : selectProps.value[VALUE_KEY] === option[VALUE_KEY]),
                                        })}
                                        role="option"
                                    >
                                        {option.name}
                                    </DropdownItem>
                                )))
                                : <span className={classnames(`${classNamePrefix}__no-options`)}>{msg.noOptions}</span>
                        }
                    </DropdownMenu>
                ),
                ValueContainer: ({children, ...restValueContainerProps}) => (
                    <DropdownToggle className={`${classNamePrefix}__flip-toggle`} tag="div">
                        <components.ValueContainer {...restValueContainerProps}>
                            {children}
                        </components.ValueContainer>
                    </DropdownToggle>
                ),
                MultiValueContainer: ({children, ...restValueContainerProps}) => (
                    <DropdownToggle className={`${classNamePrefix}__flip-toggle`} tag="div">
                        <components.MultiValueContainer {...restValueContainerProps}>
                            {children}
                        </components.MultiValueContainer>
                    </DropdownToggle>
                ),
                IndicatorSeparator: () => <span />,
            }
}

note: Im using reactstrap coponents becasuse their handle menu floping when its needed

[clickblipclick]

And I think I just figured out why. You can’t define your replacement component directly on the components prop object like this:

<Select
  options={options}
  value={selectValue}
  closeMenuOnSelect={false}
  onChange={value => setSelectValue(value)}
  components={{
    ValueContainer: props => <components.ValueContainer {...props} />
  }}
/>

You have to define the custom component elsewhere outside the render like so:

const CustomValueContainer: React.FC = props => (
  <components.ValueContainer {...props} />
);

const App = () => {
  const [selectValue, setSelectValue] = useState();
  return (
    <div className="App">
      <Select
        options={options}
        value={selectValue}
        closeMenuOnSelect={false}
        onChange={value => setSelectValue(value)}
        components={{
          ValueContainer: CustomValueContainer,
        }}
      />
    </div>
  );
};

Why? I assume because there is some side-effect event listener being added, on recreating the component on every render causes that not to work. (Just a guess).

[todesstoss]

Faced the same issue.

You have to define the custom component elsewhere outside the render like so:

In this case it’s no possible to provide custom props to this custom component

UPD:

for someone else facing same issue, custom props can be passed on Select element and accessed via props.selectProps