[BUG] dark mode dropdown issues

[csandman]

[BUG] dark mode dropdown issues

[csandman]

Ah, I've found the issue. This is caused by using chakra-react-select@^4.0.0 with a version of Chakra UI below 2 (such as 1.8.8).

• React 18 + Chakra 1.8 + CRS 4: https://codesandbox.io/s/react-18-chakra-1-8-crs-4-example-8q5ge4?file=/index.js
• React 17 + Chakra 1.8 + CRS 4: https://codesandbox.io/s/react-17-chakra-1-8-crs-4-example-z0gksz?file=/index.js

As of chakra-react-select v4, you must be on @chakra-ui/react@^2.0.0 as well as react@^18.0.0 in order for it to work properly, as mentioned in the release notes and the readme. You can check Chakra UI's official migration guide for getting set up with the new version.

If you do not plan on updating your react and chakra versions (which should be done together anyway, Chakra UI v2 is only fully compatible with React v18), please downgrade chakra-react-select to v3. I will be maintaining v3 for the foreseeable future to account for this divide, and the only difference currently is the dependent package versions. If you do stay on v3, I have written separate docs for it on the v3 branch.

[aaronleopold]

I am also facing this issue, happy to share my usage! I'll link the relevant pieces of information, please let me know if there is anything else you might need.

Here is my theme config
This is the component I am working on (pushed early so I can showcase what's happening). I set menuIsOpen so I can inspect it, @lanbau that should help you out debugging since you said you can't select it to inspect it.

chakra-react-select Version

4.0.0

TypeScript?

• Yes I use TypeScript

Operating System

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

[lanbau]

i overcame it by forcing a charkra style... but it's still a hack.. would expect it to be an out of the box behaviour

import type { ChakraStylesConfig } from "chakra-react-select";

const chakraStyles: ChakraStylesConfig = {
    dropdownIndicator: (provided, state) => ({
      ...provided,
      background: state.isFocused ? "blue.100" : "002C5C",
      p: 0,
      w: "40px",
    }),
    option: (provided, state) => ({
      ...provided,
      background: "#002C5C",
    }),
  };

<Select<any>
  {...field}
  chakraStyles={chakraStyles}
   isMulti
   options={options}
   placeholder="Select countries"
   closeMenuOnSelect={false} 
/>

[csandman]

Also @aaronleopold I just tested your develop branch on my machine (M1 MacBook Air, with Chrome) and it appears to be working correctly for me:

At this point I feel like this issue may be with a specific version of one of the sub-packages of Chakra, or something OS specific but its hard to tell. Without a reproduction, I'm not sure there's much I can do, because no matter what I try I can't reproduce this issue myself.

---

On a side note, @aaronleopold stump looks like a really cool project! I've been getting interested in self hosted comic servers recently, and I'm currently a big fan of Komga, but yours looks like it has potential.

[aaronleopold]

I had those versions correct, so just deleted node_modules and reinstalled everything and it worked. Must have had residuals from old versions, which is why I'm assuming when you tried my repo is worked out the gate for you. Thanks @csandman!

[edulanasca]

Yup, it's working now, I forgot to mention I'm on Windows, with Chrome. Thanks @csandman

[csandman]

@edulanasca glad to hear it!

And @aaronleopold I realized that this might be an issue because I noticed in your package.json in your main branch you had these dependency versions:

"@chakra-ui/react": "^1.8.8",
"chakra-react-select": "^4.0.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",

So there's a fair chance you ended up with your main dependencies while on your development branch.

[csandman]

I tested this out and I'm not seeing anything causing this. See here for a working example: https://codesandbox.io/s/chakra-react-select-demo-65ohb?file=/package.json

I'd need a reproduction to figure out what's causing this.

[csandman]

The only thing I would think might be causing this would be that you have modified colors in your chakra theme. If you have any theme customizations, can you post them?

[edulanasca]

Hi, I am also facing this issue, I think it might be the css. I've noticed that in the demo you provided @csandman

The button has --chakra-colors-whiteAlpha-300

This is what I imported in my project, it uses --chakra-colors-gray-100

This is my theme config file, I just enabled dark mode https://gist.github.com/edulanasca/71679919953fcb4cee88506393ab62f4

Hope this can help

[aaronleopold]

Another update, a friend of mine tried on a windows machine on a Firefox browser and it was working:

[csandman]

I can see that multiple people are having this issue so I believe that there is some common thread that's causing it, but for some reason I still can't seem to make the issue happen.

I think the biggest clue is the comment from @edulanasca about how the styling is using gray.100 instead of whiteAlpha.300 on his local version. This confuses me however, specifically because I'm not setting that value manually. It is coming directly from the theme styles for the addon component from the Input's multi-part component theme.

The same goes for the dropdown part, which is using the theme styles from list component from the Menu's theme. So if it's happening for this, I'd think it would also be happening for the normal menu component/input addon component? It would be good to know if anyone could confirm that.

Besides that, it would also be very helpful to know what specific package versions of chakra, emotion, etc. that people are on so I can try and reproduce this more easily. I'll continue trying to reproduce this in the meantime.

[aaronleopold]

I just tested your develop branch on my machine (M1 MacBook Air, with Chrome) and it appears to be working correctly for me

Super strange! If I come across anything that helps resolve this issue I can update the thread here, otherwise I'm okay keeping the manual styling I've added for now.

Also, thanks!! It's a long ways away until a release, but I'm glad you liked it and that you got it up and running! I was a little worried people would have issues after helping my friend get it running on windows 😅

[csandman]

Good to know! If anyone else is running into this issue after updating everything, try doing a clean install.

[csandman]

I'm going to convert this to a discussion so I can highlight the answer