Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Version 4.7.6 breaks colors for selected item #308

Closed
2 of 6 tasks
rogama25 opened this issue Dec 26, 2023 · 4 comments · Fixed by #338
Closed
2 of 6 tasks

[BUG] Version 4.7.6 breaks colors for selected item #308

rogama25 opened this issue Dec 26, 2023 · 4 comments · Fixed by #338
Assignees
Labels
Bug Something isn't working

Comments

@rogama25
Copy link

rogama25 commented Dec 26, 2023

Description

Version 4.7.6 overrides your set colors for the selected elements through aria-selected css selector while I think it shouldn't. Reverting to 4.7.5 works as expected, according to #99

4.7.5:
image

4.7.6:
image

chakra-react-select Version

4.7.6

Link to Reproduction

https://codesandbox.io/p/sandbox/test-dropdown-ftll7r?file=%2Fpackage.json

TypeScript?

  • Yes I use TypeScript

Steps to reproduce

  1. Create a project with a <Select> using chakra-react-select 4.7.6
  2. Set up styles changing chakraStyles for the optionMenu setting colors, as suggested in how i can set selectedOptionColor as hexa #99
  3. Colors do not appear as expected
  4. Change package.json to use version 4.7.5
  5. Reinstall npm packages and reload
  6. Working as expected

Operating System

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

Additional Information

This might be related to some cleanup that was done to aria props and styles (maybe this commit 8ddad82)

@rogama25 rogama25 added the Bug Something isn't working label Dec 26, 2023
@csandman
Copy link
Owner

Sorry for the late response!

Yes I see your point, the styles passed in chakraStyles should generally override the built-in styles, meaning I should switch back from using the pseudo selectors as they increase specificity. I've been very busy recently but I'll get to this soon.

@csandman
Copy link
Owner

So I'm working on a new version that will solve this, but I'm also integrating the new accessibility changes react-select implemented recently. But in both cases (now and after the new version), you can implement these styles by using the _selected pseudo selector:

      chakraStyles={{
        option: (provided) => ({
          ...provided,
          _selected: {
            backgroundColor: "pink",
            color: "orange",
          },
        }),
      }}

I plan to also reduce the specificity of the built in styles so this isn't an issue, but this fix should work now.

@fernandatoledo
Copy link

fernandatoledo commented Oct 7, 2024

@csandman when using chakraStyles prop I get a typescript error:

Type '{ chakraStyles: ChakraStylesConfig<OptionType, boolean, GroupBase<OptionType>>; selectedOptionStyle: string; variant: string; ... 12 more ...; isMulti: isMultiType | undefined; } | { ...; }' is not assignable to type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<OptionType, isMultiType, GroupBase<OptionType>>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'.
  Type '{ chakraStyles: ChakraStylesConfig<OptionType, boolean, GroupBase<OptionType>>; selectedOptionStyle: string; variant: string; ... 12 more ...; isMulti: isMultiType | undefined; }' is not assignable to type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<OptionType, isMultiType, GroupBase<OptionType>>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'.
    Property 'chakraStyles' does not exist on type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<OptionType, isMultiType, GroupBase<OptionType>>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'.ts(2322)

@csandman
Copy link
Owner

@csandman when using chakraStyles prop I get a typescript error:

Type '{ chakraStyles: ChakraStylesConfig<OptionType, boolean, GroupBase<OptionType>>; selectedOptionStyle: string; variant: string; ... 12 more ...; isMulti: isMultiType | undefined; } | { ...; }' is not assignable to type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<OptionType, isMultiType, GroupBase<OptionType>>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'.
  Type '{ chakraStyles: ChakraStylesConfig<OptionType, boolean, GroupBase<OptionType>>; selectedOptionStyle: string; variant: string; ... 12 more ...; isMulti: isMultiType | undefined; }' is not assignable to type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<OptionType, isMultiType, GroupBase<OptionType>>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'.
    Property 'chakraStyles' does not exist on type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<OptionType, isMultiType, GroupBase<OptionType>>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'.ts(2322)

@fernandatoledo What version of chakra-react-select and @chakra-ui/react are you on? I know this wasn't working in v4.9.0, and could be broken if you have a weird combination of peer dependencies.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants