dark mode dropdown issues

[lanbau]

Description

added this package and was expecting dark mode to work out of the box. But as you can see the options are not visible. Any idea how i can style the options background manually? Can't seem to select it using inspect element

chakra-react-select Version

4.0.0

Link to Reproduction

No response

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

[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?

[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

[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:

[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]

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.

[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 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]

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.

[csandman]

After some further evaluation prompted by this comment I realized that the issue is more generally caused by duplicate versions of @chakra-ui/system being installed. To prevent this, @chakra-ui/system has been moved from dependencies to peerDependencies. See #136 for more info.

This change has been published in v4.0.1.

[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!

[csandman]

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

[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'm going to convert this to a discussion so I can highlight the answer

[frysztak]

this also happens for React 18, Chakra React Select 4 and Chakra UI 2.1. it's Chakra UI 2.1 that causes problems.

I think it happens because @chakra-ui/* packages are listed as dependencies with versions ^2.0.0. this caused Yarn 3 to resolve @chakra-ui/system to version 2.0.2, which meant that I had two different versions (2.0.2 and 2.1.1) running at the same time. this is obviously not good.

temporary workaround for me is to force to use 2.1 version: yarn set resolution -s @chakra-ui/system@npm:^2.0.0 ^2.1.1 (this updates yarn.lock so it's persistent). I believe that moving @chakra-ui/* packages to peerDeps is the way to go

[csandman]

Afraid to say I can't move them to peerDeps, I recently had to move them to normal dependencies from dev dependencies to solve a whole other mess of other issues. However, chakra-react-select's dependencies for chakra's subpackages being pinned at ^2.0.0 shouldn't be an issue as that should allow all versions from >=2 to <3. If you run into an issue where for some reason CRS had it's dependencies pinned at a lower version it should easily be fixed by running yarn dedupe or yarn dedupe --strategy highest.

[csandman]

However, I'll think on this more, I have to learn more about how yarn and npm lockfiles handle diverging dependencies among child packages. If this ends up being an issue every time @chakra-ui/system is updated then I'll reconsider changing the way things are organized. Unfortunately, there seems to be no easy answer for how to handle these deps vs peer deps that works consistently with npm, yarn v1, and yarn v2/v3. Something always seems to cause a problem.

[frysztak]

dependencies for chakra's subpackages being pinned at ^2.0.0 shouldn't be an issue as that should allow all versions from >=2 to <3

I know, right? yet Yarn was horribly stubborn 😆

yarn dedupe or yarn dedupe --strategy highest

this is great, I didn't know about this command. thanks!

[csandman]

Well... I gave in and went back to peer dependencies for all the packages. Switching only the @chakra-ui/system package to peer deps ended up breaking the rest of the chakra packages I was using on all but one version of @chakra-ui/react. Trying to set up these dependencies in a way that doesn't cause issues for anyone has been the biggest pain point in this project haha.

[frysztak]

hopefully it works out 🤞

[sholzmayer]

For me the Options were shown in darkmode, while the application was in lightmode. The reason for that: The property value was missing on the Option item. This library doesn't have a typecheck if the value is there, which would avoid this kind of issues.

[csandman]

This sounds like a different issue as the issue mentioned here had to do with duplicate versions of @chakra-ui/system. Do you have an example you could show me (or could you make one with the CodeSandbox template)? If this is a real issue its something I'd like to investigate.

And as far as type checking goes, there should be type checking if you pass in the structure of the options object as a generic to the component. Something like this:

import { Select, OptionBase } from "chakra-react-select";

interface ColorOption extends OptionBase {
  label: string;
  value: string;
}

export const colorOptions = [
  { value: "blue", label: "Blue" },
  { value: "purple", label: "Purple" },
  { value: "red", label: "Red" },
  { value: "orange", label: "Orange" },
  { value: "yellow", label: "Yellow" },
  { value: "green", label: "Green" }
];

const App = () => (
  <Select<ColorOption>
    options={colorOptions}
  />
);

If you pass a generic with label and value and pass in an array of options that don't have the same shape, you'll get type errors.

Here's an example: https://codesandbox.io/s/chakra-react-select-option-generic-example-guiqnw

And in this example, I'm not seeing any dark mode so I'm really curious what you were experiencing.

[sholzmayer]

Having status instead of value in a non multi select. See here: https://codesandbox.io/s/chakra-react-select-option-generic-example-forked-stosf1?file=/app.tsx:349-467

Indeed typescript catches this but it breaks the select.

{ status: "orange", label: "Orange" },
{ status: "yellow", label: "Yellow" },
{ status: "green", label: "Green" }

[csandman]

I'm not really sure what territory we're entering here haha, this seems like an example that should be breaking. And in line with that, TypeScript says it's wrong.

If you'd like to use status instead of value you can however, as long as each item has a unique value for the status key (and has it defined). Just change your Option interface to have status instead of value:

interface ColorOption extends OptionBase {
  label: string;
  status: string;
}

And then pass the prop getOptionValue into your Select which returns the status key:

<Select<ColorOption, true, GroupBase<ColorOption>>
  getOptionValue={({ status }) => status}
/>

Here's a complete example:

interface ColorOption extends OptionBase {
  label: string;
  status: string;
}

const colorOptions: ColorOption[] = [
  { status: "blue", label: "Blue" },
  { status: "purple", label: "Purple" },
  { status: "red", label: "Red" },
  { status: "orange", label: "Orange" },
  { status: "yellow", label: "Yellow" },
  { status: "green", label: "Green" },
];

const App = () => (
  <Select<ColorOption, true, GroupBase<ColorOption>>
    name="colors"
    options={colorOptions}
    placeholder="Select some colors..."
    getOptionValue={({ status }) => status}
  />
);

CodeSandbox: https://codesandbox.io/s/chakra-react-select-option-generic-example-with-getoptionvalue-tc8gz1?file=/app.tsx

---

Side note, when using a single select make sure the second generic on the Select is false as that value reflects the IsMulti type.