[BUG] classNames prop from react-select doesn't work, using in react-select directly works

[yashcr07]

Description

When passing the classNames prop from react-select in chakra-react-select it doesn't apply the class to the respective component. Eg.

classNames={{
  control: (state) => cx("select-control", state.menuIsOpen ? "menu-open" : null),
}}

I see the props are spread here, which should pass it to react-select and this should probably work

chakra-react-select Version

4.9.1

Link to Reproduction

https://codesandbox.io/p/sandbox/chakra-react-select-classnameprefix-demo-forked-cyym58?file=%2Fexample.js%3A15%2C33

TypeScript?

• [ ] Yes I use TypeScript

Steps to reproduce

I've used the same configuration for both the dropdowns, you'll see the react-select dropdown applies the class but not chakra-react-select

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux
• [ ] iOS/iPadOS
• [ ] Android

Additional Information

[csandman]

Interesting, I've never actually used this prop from react-select, so I'm not sure why those aren't getting forwarded. I'll take a look at what's going on and let you know.

[yashcr07]

@csandman I found the issue, it will only work out of the box with components which are not part of this lib's chakraComponents. I've updated the sandbox with a custom Control component and it works, so I'm not sure if this is a bug and how you'd want to handle this, but surely would be helpful to include it in the docs.

[csandman]

I've recently taken a look comparing the custom internal components of react-select and the ones I made for charka-react-select, and realized mine are a bit out of date haha. That classNames prop is actually newer than my components, so none of mine actually have support for it yet. This was the issue/PR where it was originally introduced for reference:

• https://github.com/JedWatson/react-select/issues/5451
• https://github.com/JedWatson/react-select/pull/5457

So in order to add support for the classNames prop, I'm going to have to do a larger scale change across the custom components in this package, which will probably take a bit, so I'll have to find some time I can get to it.

For more info, can you fill me in on the specific use case you have for this? Are you trying to pair this with tailwind or something like the original feature was designed for?

[csandman]

I also realized there was an issue related to this made a while ago: #223

For some reason I never looked into the actual impact of the change, or think to implement it here. Ah well. I'm still planning to look into it, I've just been more preoccupied with upgrading for Chakra V3.

[yashcr07]

@csandman no worries, my use case is not specific, I can do the same styling using the chakraStyles prop. I wanted to make it work only using css classes and thus I found out it currently doesn't support.

I'm not sure if you saw the updated sandbox, I've implemented a workaround and it works fine.