[BUG] Hover Styling Missing with Chakra >= 2.4.0

[justinforlenza]

Description

When using chakra 2.4.0 or greater the hover styling for options is no longer visible in chakra-react-select

Chakra 2.4.1

Chakra 2.3.7

chakra-react-select Version

4.4.0

Link to Reproduction

https://codesandbox.io/s/chakra-react-select-missing-hover-style-584m52

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. Install Charka UI >= 2.4.0 & Chakra React Select
2. Create select component
3. hover over select option

Operating System

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

Additional Information

No response

[kicks321]

@csandman, so we just started integrating this library into our frontend project.

We have two applications, both running 4.4.0. What's weird is one of them, hover styles works perfect. In the other, it doesn't at all.

[kicks321]

@justinforlenza and @csandman, I was able to solve this problem using just a custom Chakra Style

    const chakraStyles: ChakraStylesConfig = {
        dropdownIndicator: (provided, state) => ({
            ...provided,
            background: state.isFocused ? 'blue.100' : provided.background,
            p: 0,
            w: '40px',
        }),
        placeholder: (provided, state) => ({
            ...provided,
            color: 'gray.500',
        }),
        option: (provided, state) => ({
            ...provided,
            _hover: {
                color: 'blue.500',
                bg: !state.isSelected && 'gray.100',
            },
        }),
    };

[csandman]

Sorry for the late response on this, I've been on vacation for the past week. I published a new version (v4.4.1) with the fix from @tzii which appears to do the trick, but if there are any further issues feel free to reach out!

It appears this issue was caused by a change in the way Chakra UI styles their hovered/focused options in their Menu component, just so people are aware.