[BUG]: colorScheme doesn't get passed to input variants

[barrymichaeldoyle]

Description

When I pass colorScheme to the Select component. I expect to be able to use in my theme file. But the colorScheme comes back as undefined.

If I copy exactly what it here:

https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/input.ts

Let's console.log the colorScheme in variantOutline.

const variantOutline = definePartsStyle((props) => {
  const { colorScheme, theme } = props
  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)

  console.log({ colorScheme });

  return { ... }
})

When I do this for a normal Input it correctly shows the colorScheme that I passed to my component. This works for other libs that use Chakra's input under the hood too.

But with this library it returns undefined.

chakra-react-select Version

4.6.0

Link to Reproduction

No response

TypeScript?

• Yes I use TypeScript

Steps to reproduce

No response

Operating System

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

Additional Information

I think it's just getting cleared somewhere. I tried to dig through the codebase to find it but everything is pretty much abstracted away.

[barrymichaeldoyle]

For extra context I'm referring to the global colorScheme prop:

E.g. if it is used like this:

<Select colorScheme="red" />

[csandman]

Hmm I see what you mean. I think this is due to a difference in the way I'm using color scheme from how you're expecting it to be. As per the docs:

You can pass the colorScheme prop to the select component to change all of the selected options tags' colors. You can view the whole list of available color schemes in the Chakra docs, or if you have a custom color palette, any of the custom color names in that will be available instead.

Alternatively, you can add the colorScheme key to any of your options objects and it will only style that option when selected.

This prop was originally added for the Tag, component used to display the selected options for a multi-select. It was added a long time ago when this package was just a gist I had shared with some people who were interested, and I was just playing around with some customizations. Realistically I should probably have called it tagColorScheme, but it was hard to predict how far this project would come, and I didn't plan ahead very well. At this point, switching that around would be a breaking change that I'm not sure if I'd like to make, due to the fact that the Input component doesn't do anything with the colorScheme prop by default.

And on that note, what exactly are you trying to accomplish with this? What are you using the colorScheme prop for? Maybe there is some alternative approach?

[barrymichaeldoyle]

I've managed to make a work around using the `chakraStyles` props like this: chakraStyles={{ control: (provided, _state) => ({ ...provided, borderColor: isMaterial ? `${colorScheme}.200` : undefined, color: isMaterial ? `${colorScheme}.500` : undefined, _hover: { borderColor: isMaterial ? `${colorScheme}.300` : undefined, }, }), }} It would be nice though to at least have something like `chakraColorScheme` as a prop that would be passed down to that...

[VasilyShelkov]

I was trying to achieve the same thing which is to change the background of the select input. I have a grey background which if I don't set the select background is grey like the "Operator" select but I want it to be white like the "Variable" select which I added a wrapping <Box /> but that solution doesn't work if you have a border radius. Ideally want to be able to set the background colour similar to Inputs which I have done with the "Value" input.

@barrymichaeldoyle solution works well though

[csandman]

As of v5.0.0, I renamed the attribute to be tagColorScheme to prevent confusion. I am also considering adding back the original colorScheme prop though, and making it apply to the select itself, but haven't decided whether to do so or yet.

[ivadenis]

As of v5.0.0, I renamed the attribute to be tagColorScheme to prevent confusion. I am also considering adding back the original colorScheme prop though, and making it apply to the select itself, but haven't decided whether to do so or yet.

that would be nice if i could control the color of the outline (border color) on the field.

[csandman]

that would be nice if i could control the color of the outline (border color) on the field.

This is already currently possible using the focusBorderColor prop. This reflects the built-in behavior of the Chakra input. You can see an example of these being implemented here: https://stackblitz.com/edit/vitejs-vite-vhcvmv?file=src%2Fapp.tsx

---

Fair warning though, it appears that they are removing these theme props from Chakra v3, so if you plan to upgrade to that at some point, expect that these props will probably be removed in favor of a more custom implementation.