[v2.0.0-beta.2] Custom ValueContainer doesn't work without rendering "children"

I’m trying to use the ValueContainer option to render the selected option differently. Seems I cannot do that and still let the selected option (ValueContainer) be clickable and open the menu without also rendering the children prop. However, in rendering the children prop, I’m basically rendering the selected option twice. Clicking the arrow still works though.

Basically, this works fine (example from docs):

const ValueContainer = ({children, ...props}) => (
  <components.ValueContainer {...props}>{children}</components.ValueContainer>
);

This does not work:

const ValueContainer = ({children, ...props}) => {
  if (!props.hasValue) {
    return <components.ValueContainer {...props}>{children}</components.ValueContainer>;
  }

  const value = props.getValue()[0];
  return (
    <components.ValueContainer {...props}>
      <NodeItem node={value} />
    </components.ValueContainer>
  );
};

[Rall3n]

You could filter out the input from children so you can still keep standard functionality:

const ValueContainer = ({children, ...props}) =>{
    var selectInput = React.Children.toArray(children).find((input) => input.type.name === "Input" || input.type.name === "DummyInput");
   
    return <components.ValueContainer { ...props }>
        { /* Whatever you want to render */ }
        {selectInput}
   </components.ValueContainer>
}

[brahmdev]

We were also facing this problem for a while. And below is the working code for us.

1. We added inputId prop to <Select> component like below:

<Select
          className='select'
          classNamePrefix='filter'
          inputId='clickableInput'
          isMulti
          components={{ ValueContainer }}
         ....
        />

1. And below is our return from ValueContainer:

return (
      <components.ValueContainer {...props}>
       // code for some custom element if you need goes here
        {React.Children.map(children, (child) => {
          return child.props.id === 'clickableInput' ? child : null;
        })}
      </components.ValueContainer>
    );