[BUG] type become "unknown" whenever i use charkaStyles or styles prop

[Thomas Willumsen]

Description

When i use the chakraStyles property or the styles property, the inferred type throughout the whole component becomes unknown.
I would have expected this to not make any difference to the inferred type.

Works fine without:

Unknown type:

chakraStyles:

chakra-react-select Version

3.3.3

TypeScript?

• Yes I use TypeScript

Operating System

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

[Chris Sandvik]

Hmm I'll have to look into why this is happening specifically when you use chakraStyles (or styles). However, it may be something to do with the inner workings of react-select and not something I can change.

However, its relatively easy to fix by passing in the structure of your option object as a generic into your Select component. Here's an example of how you could do that:

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

// If you use other fields like isDisabled, isFixed, colorScheme, or variant
// extend it from the type OptionBase for convenience
interface Option extends OptionBase {
  label: string;
  value: number;
}

// otherwise you can declare the interface on its own
interface Option {
  label: string;
  value: number;
}

const MySelect = () => (
  <Select<Option> // <-- Pass a generic into a React component like this
    chakraStyles={chakraStyles}
    size="sm"
    defaultValue={{ label: client?.clientName, value: client?.clientId }}
    options={clients.map((c) => ({
      label: c.name,
      value: c.id,
    }))}
    onChange={(e) => {
      e?.value && dispatch(AssumeClientAsync(e.value));
    }}
  />
);

You can see in this example that passing in the generics to the Select alleviates this issue if you hover over the onChange function: https://codesandbox.io/s/chakra-react-select-styled-like-a-default-chakra-select-qwq3o?file=/app.tsx

---

EDIT: After playing around with that example for a minute, I'm seeing that even without the generics the type of the options still appears to be inferred correctly. You can see for yourself by hovering onChange in this example: https://codesandbox.io/s/chakra-react-select-styled-like-a-default-chakra-select-forked-gl7ovs?file=/app.tsx

This would seem to indicate that there is something else going wrong with your example, other than just the chakraStyles prop. I'll post an update if I discover anything else.

[Thomas Willumsen]

If i define the charkaStyles inline like in your linked example it appears to work fine.
The problem only happens if i define the charkaStyles object separately using the ChakraStylesConfig type.

But I'll just do it inline, thats good enough :)

[Thomas Willumsen]

Thanks for your help.

[Chris Sandvik]

Ah yes, ok that would make sense. I think I know what the issue is then.

Both the ChakraStylesConfig type and the Select component can take the optional Option generic to inform the inner workings of React Select what to expect for each option object. When you define the chakraStyles prop outside of the component, it has no way of inferring the interface structure of your options, so then passing it into the component causes the Select to be confused about the shape of that object and make it infer unknown instead.

Overall I still don't fully understand the inner workings of react-select enough to know exactly why this happens, as it is quite a complex package, but if you want to read more about how react-select uses TypeScript, check this page of the docs out: https://react-select.com/typescript

Anyway, glad I could help!

[Chris Sandvik]

On a side note, I just tested this with the original React Select package, with the styles prop instead of chakraStyles and got the same result: https://codesandbox.io/s/chakra-react-select-react-select-inferred-types-x677s8?file=/app.tsx

So its good to know this is not something unique to my chakraStyles prop. This also means there's nothing I can really do to fix this issue.

[Thomas Willumsen]

Thank you for taking the time to investigate, and so quickly as well 👍