code is imploding on borderRadii

[gjblajian]

https://github.com/csandman/chakra-react-select#size--options-sm-md-lg--default-md
@csandman we are using the select component and it is rendering fine at first but the minute we click on the component the underlying menuList is blowing up. It seems to be indicating that the theme is not loaded. The size attribute is set to sm but it also blows up in the same location if the attribute is not set (defaulting to md).

So my question is, do we need to include some other library to use the useTheme().radii?

menu.tsx:85 Uncaught TypeError: Cannot read properties of undefined (reading 'md')
    at MenuList (menu.tsx:85:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

  const borderRadii: SizeProps = useTheme().radii;

  const initialStyles: SystemStyleObject = {
    ...list,
    maxHeight: `${maxHeight}px`,
    overflowY: "auto",
    borderRadius: borderRadii[size as Size], // blowing up on this line
  };

[csandman]

You do need Chakra UI installed to use this package, and the ChakraProvider component needs to be above chakra-react-seelct in your component tree. So if you don't have that set up, then that would be your issue.

If you do have that set up already, then something else must be wrong and I'd need more info to diagnose. If that doesn't fix it, can you post a full code snippet of how you implemented the Select component?

[csandman]

Glad to hear it! I didn't realize you had a separate dep on that, do you think that was causing the issue?

[jaredmpeterson]

probably. It was installed and used months ago before we migrated to chakra-react-select.

[csandman]

Well thank you for responding with how you got it working again, this might help others in the future!

[jaredmpeterson]

We can mark it as answered. 😄

[csandman]

@csandman I updated chakra-react-select@3.3.3 and removed our dependency for react-select and we are good to go.

If you'd like to repost your comment from above as a new answer and mark it as the correct answer that could make it easier for others to find it!

[csandman]

@csandman I updated chakra-react-select@3.3.3 and removed our dependency for react-select and we are good to go.