I need to show the number of selected options instead of the actually selected options. Here is what I'd like to achieve, which I created a mockup with manipulating the DOM in the browser inspection.
In the baseweb/baseui documentation, it is mentioned that it can be achieved by overriding, however, when I use override property, it affects the style and behavior as you can uncomment and see the result.
Here is the code-snippet: https://codesandbox.io/s/nifty-johnson-erkfr
I asked the same question in the Baseweb Slack channel and here is the answer from one of the guys behind it.
overrides={{
MultiValue: {
component: (data) => {
if (selectedOption.length) {
const isFirst = selectedOption[0].id === data.value.id;
if (isFirst) {
return <Tag {...data} closeable={false}>{selectedOption.length} Selected</Tag>
}
}
return null
}
}
}}
Hope it saves someone else's time.