reactjsselectbaseweb

Override BaseWeb/baseui Select label


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.

enter image description here

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


Solution

  • 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.