selectedOptionStyle with isMulti

[muturiken]

Description

selectedOptionStyle="check" does not work with multi select option see below

chakra-react-select Version

4.1.4

Link to Reproduction

https://codesandbox.io/s/chakra-react-select-border-selectedoptionstyle-forked-r4vd8r?file=/example.js

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Operating System

• macOS
• Windows
• Linux
• iOS/iPadOS
• Android

Additional Information

No response

[Chris Sandvik]

If you check the docs on selectedOptionStyle it mentions this:

selectedOptionStyle — Options: color | check — Default: color

As of v1.3.0 you can pass the prop selectedOptionStyle with either "color" or "check". The default option "color" will style a selected option similar to how react-select does it, by highlighting the selected option in the color blue. Alternatively, if you pass "check" for the value, the selected option will be styled like the Chakra UI Menu component and include a check icon next to the selected option(s). If isMulti and selectedOptionStyle="check" are passed, space will only be added for the check marks if hideSelectedOptions={false} is also passed.

So you really just need to pass hideSelectedOptions={false} in order to make it work, because the default is true when isMulti is passed.

https://codesandbox.io/s/hq3ynk?file=/example.js:426-642