When using ValueContainer as a custom component, if children is not rendered, the menu does not close when clicking outside

[uu29]

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.

[ssabii]

I have this same issue.

[uu29]

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>
    );

[kukurudz-volodymyr]

@uu29 didn't work for me, but this answer helped to solve this issue without filtering - #4845 (comment)

[uu29]

@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.

[DeOne4eg]

I have this same issue.