Open
Description
I'm using the react-select 5.8.3 version, and I'm using components properties to extend the ValueContainer to custom components, and I'm writing this after finding an issue.
When using a multi-select, I implemented a conditional statement as shown below to customize the appearance of the ValueContainer as a custom component.
// my custom ValueContainer.tsx
function ValueContainer(props: ValueContainerProps<OptionBase[] | OptionBase>) {
const {
children,
selectProps: { value, isMulti },
} = props;
if (!isMulti) {
return <components.ValueContainer {...props}>{children}</components.ValueContainer>;
}
const valueLength = Array.isArray(value) ? value.length : 0;
const text = valueLength > 0 ? {{MY_CUSTOM_TEXT}} : children; // If isMulti is true and there is at least one selected value, it renders custom text.
return <components.ValueContainer {...props}>{text}</components.ValueContainer>; // clicking outside the Select’s DOM does not close the menu
}It seems that when children is not rendered in the ValueContainer as per the condition mentioned above, the menu close does not work when clicking outside.