Override BaseWeb/baseui Select label

Question

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

Answer 1

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.