JedWatson
When using ValueContainer as a custom component, if children is not rendered, the menu does not close when clicking outside
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.
I resolved this issue using this method
// when rendering custom component
const noValueChildren = React.Children.toArray(children).filter((child) => [components.Input, components.Placeholder].includes(child.type));
return (
<components.ValueContainer {...props}>
{MY_CUSTOM_TEXT}
{noValueChildren}
</components.ValueContainer>
);
@uu29 didn't work for me, but this answer helped to solve this issue without filtering - https://github.com/JedWatson/react-select/issues/4845#issuecomment-1665190832
@uu29 didn't work for me, but this answer helped to solve this issue without filtering - #4845 (comment)
thanks, but still doesn't work. I Already seperate the Custom Component from Select.
