Dropdown does not appear on clicking inside value but appears on click of down arrow icon in React Select

I am using Multi Select and want to render just 1 item and then show additional selected item as +(this) more inside the selected area, it works fine when there is no value selected, but when the select component is populated from api response i.e when it already has value inside it the dropdown doesn’t appear on clicking of the area where selected value are shown but it opens when I click on down arrow icon. I am using styled component for styling. I asked in StackOverflow but didn’t got any answer, so posting here hope I get some solution. `

       const ValueContainer = ({ children, getValue, hasValue, ...props }) => {

	let maxToShow = 1;
	let length = getValue().length;
	let displayChips = React.Children.toArray(children).slice(0, maxToShow);
	let shouldBadgeShow = length > maxToShow;
	let displayLength = length - maxToShow;

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

	return (
		<components.ValueContainer {...props}>
			{!props.selectProps.inputValue && displayChips}
			<Div
				fontSize={0}
				fontWeight={5}
				color="#4380FF"
				ml="auto"
				pl="3px"
				minWidth="56px">
				{shouldBadgeShow && `+ ${displayLength} more`}
			</Div>
		</components.ValueContainer>
	);
};
   const Option = props => {
	return (
		<Div>
			<components.Option {...props}>
				<Flex alignItems="center">
					<CheckBox
						checked={props.isSelected}
						width="20px"
						height="20px"
						mr="10px"
					/>
					<Div width={0.85}>{props.label} </Div>
				</Flex>
			</components.Option>
		</Div>
	);
};
    <Select
	classNamePrefix="faq__dropdown"
        className={
	'faq__dropdown--empty'
	}
	isClearable={false}
	isSearchable={false}
        isMulti
	hideSelectedOptions={false}
	closeMenuOnSelect={false}
	components={{ Option, MultiValue }}
	options={attributeMsgs}
	value={selectedAttributeMsgs}
	onChange={e => handleAttributeMsg(e)}
								
	/>

`

[Shivraj97]

@ebonow I was able to solve the issue, Thanks for the help.

[ebonow]

@Shivraj97 the solution you are referring to filters out all children elements of the ValueContainer including the Placeholder. You would need to make sure you specify it as a filtered item. If you wanted to achieve it with the solution that was recommended then it would look similar to this:

const IndicatorsContainer = ({ children, ...props }) => {
  const allowedTypes = ["Placeholder", "Input"];
  const allowedChildren = Children.map(children, (child) => {
    return child && allowedTypes.includes(child.type.name) ? child : null;
  });

  return (
    <components.ValueContainer {...props}>
      // Put your other custom JSX stuff here 
      {allowedChildren}
    </components.ValueContainer>
  );
};

It’s also worth noting that there is a prop called controlShouldRenderValue which will filter out the value component for you so it could be better simplified by removing all of the filtering and just passing in that prop as true with the extra JSX you want to put in the ValueContainer.