Limit the number of items to show in the input field. If not set will show all selected.

[BasirBaidya]

Hi, How can I itemsShowLimit Limit the number of items to show in the input field. If not set will show all selected?

[ebonow]

Greetings @BasirBaidya ,

Converting this to a discussion since this does not appear to be an issue with the library.

This appears to be a similar question to this: #3856

I think the best way to approach this is to filter the available options provided to the Select. This way you could avoid using styling or more custom components

const selectedVals = values.map(x => x.value);
const hiddenOptions = selectedVals.length > 3 ? selectedVals.slice(0, 3) : [];
const options = colourOptions.filter(x => !hiddenOptions.includes(x.value))

return <Select options={options} .../>

codesandbox demo

Please let me know if this is what you are looking for

[BasirBaidya]

Thanks @ebonow it works as expected. but there has small issue
Firstly, I have added closeMenuOnSelect={false} in config.
The problem is when I checked the max show item (suppose 3) then the menu is not get close on clicking outside (The menu options stay open).
But if I check less than max show items then it close on clicking outside.

[ebonow]

You are correct. Not quite sure how the "extra selected" text is impacting the closing behavior when more than 2 are selected. I'll have to look at this a bit more

[BasirBaidya]

And another thing @ebonow I want onMenuClose event couldn't find here. Actually I think for multiSelect dropdown I should choose multiple options and then close the menu and finally onMenuClose event call the do some API call work. How can I achieve this?