csandman / chakra-react-select Goto Github PK

A Chakra UI themed wrapper for the popular library React Select

Home Page: https://www.npmjs.com/package/chakra-react-select

License: MIT License

JavaScript 0.77% Shell 0.10% TypeScript 99.13%

react combobox select multi-select chakra-ui chakra react-select autocomplete chakra-ui-react chakra-react-select

chakra-react-select's Introduction

Hi! My name is Chris, and I'm a front end focused full stack developer specializing in React using the Next.js framework. I really love everything JavaScript (and TypeScript), from Node.js backends to Puppeteer automations to browser extensions. I also enjoy aggregating, normalizing, and presenting data through web scraping or other means.

Most of my personal projects are open source, but here are a few that are not:

Screenshotr - https://screenshotr.app/

Screenshotr is a tool for designers, developers, and marketers with the purpose of creating browser and mobile mockups of different websites or apps. They can be used in blog posts, portfolios, social media posts, etc to add some flare. You can get started by typing in a URL to have it pull a screenshot for you, or uploading a screenshot by pasting it, dropping it on the screen, or clicking the upload button in the top right.

Slice Map - https://slicemap.com/

I created Slice Map to filter out all the pizza places in NYC you don't want to eat at — any that cost more than $1! Out and about after a late night? Pull up Slice Map, filter by "Open Now", And find the closest option to you!

Do you know of any I might have missed? Fill out the submission form and once verified, it will be added to the site!

If you would like to get in contact with me, feel free to leave an issue on my personal GitHub repo!

chakra-react-select's People

Contributors

Stargazers

Watchers

chakra-react-select's Issues

[BUG] dark mode dropdown issues

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

Go to '...'
Click on '...'
Scroll down to '...'
See error

Operating System

Additional Information

No response

[BUG] When using Select component inside a Modal component from Chakra UI V2

Description

Hello,

I am using the Select component inside of a Chakra UI Modal component.
Everything works as expected until the moment I close the Modal and re-open it.

The selections are gone when the Modal is re-opened. However, it appears that the value state is still saved because when I create: const [selectValue, setSelectValue] = useState([]);
Then I update the state with an onChange={(event) => setSelectValue(event)} and then read that state when opening the modal again it appears to be saved.

chakra-react-select Version

4.0.0

Link to Reproduction

https://codesandbox.io/s/chakra-ui-react-select-forked-1rmcdb

TypeScript?

Yes I use TypeScript

Steps to reproduce

Open the modal with the "Open Modal"-button
Select some things into the Select component
Close the modal
Open the modal

Operating System

Additional Information

No response

Upgrade to React-Select v5.0

React-Select has been upgraded to v5.0 and completely rewritten in TypeScript.

https://github.com/JedWatson/react-select/releases/tag/react-select%405.0.0

[BUG] Tag close button is not working in Multi Select mode

Describe the bug
When clicking the close button of the selected tag, it does nothing.

Link to Reproduction
https://codesandbox.io/s/chakra-react-select-next-js-dtnsm?file=/pages/index.js

To Reproduce
Steps to reproduce the behavior:

Select an Option
Click the Tag Close Button

Expected behavior
It should remove the selected option.

Desktop (please complete the following information):

OS: macOS
Browser: Chrome
Version: 97.0.4692.71

use with formik

Is your feature request related to a problem? Please describe.
I tried to use this with Formik. But I couldn't get it to work as a drop in replacement fromthe normal chakra ui select.

Describe the solution you'd like
If this is already implemented, I would love an example. If not, what's the point of a Select without it being useful for forms.

Describe alternatives you've considered
I searched how people do that with react select, but I couldn't do it.

Here is my code, it works with the normal Chakra UI Select.

<Field name="subject" validate={validateSubject}>
  {({ field, form }: FieldProps) => (
    <FormControl
      isInvalid={!!form.errors.subject && !!form.touched.subject}
      isRequired
    >
      <FormLabel mt="4">Subject</FormLabel>
      <Select
        {...field}
        id="subject"
        placeholder="Select subject.."
        options={options}
        rounded="4"
      />
      <FormErrorMessage>{form.errors.subject}</FormErrorMessage>
    </FormControl>
  )}
</Field>

But I get this error with the new select.

Unhandled Runtime Error

TypeError: target is undefined
Call Stack
useFormik/executeChange<
node_modules\formik\dist\formik.esm.js (721:0)
useFormik/handleChange<
node_modules\formik\dist\formik.esm.js (755:0)
useEventCallback/<
node_modules\formik\dist\formik.esm.js (1256:0)

[BUG] Select blurs when it is used in other clickable element

Description

Screen.Recording.2022-07-29.at.17.45.17.mov

chakra-react-select Version

4.1.4

Link to Reproduction

No response

TypeScript?

Yes I use TypeScript

Steps to reproduce

Go to '...'
Click on '...'
Scroll down to '...'
See error

Operating System

Additional Information

No response

[BUG] Dark mode text color should change

[QUESTION] How to set defaultValue with styles?

Default values are not given the appropriate color

 <FormControl p={4}>
  <FormLabel>Select Tag</FormLabel>
  <Select
    size="lg"
    isMulti
    name="colors"
    options={mappedOptions}
    placeholder="Select some tags"
    closeMenuOnSelect={false}
    onChange={handleSetSelectedOptions}
    defaultValue={[mappedOptions[1]]}

  />
</FormControl>

[BUG] React Hook form - reset not working

Describe the bug
When calling the reset function of the react hook form the input continues with the selected values.

Link to Reproduction
https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-forked-cjo82?file=/example.js

To Reproduce
Steps to reproduce the behavior:

Go to codesandbox
Fill the form
See the bug

Expected behavior
the select input should be empty

Desktop (please complete the following information):

OS: Windows
Browser: chrome
Version: ^3.0.3

[FEATURE] Allow any React.ReactNode to be a label

Currently labels can only be strings. It is very restrictive. I would like them to be a React Node as React Select allows it.

Long term support

Please don't take offense :) It looks as though commits are regular etc. On a scale of 1-10 can you give me an idea as to commitment? Have a large project I'm considering using this lib in. Happy to contrib etc. Just wondering if author is currently using in production. Honestly no wrong answer here. Thanks in advance.

[BUG] CreatableSelect with onCreateOption prop has a bug

Describe the bug
If you use CreatableSelect with onCreateOption, <CreatableSelect onCreateOption={...} /> to create a new option, the created value is not displayed.

Link to Reproduction
https://codesandbox.io/s/chakra-react-select-oncreateoption-cy2ko

You can confirm that react-select has no problem with that.
https://codesandbox.io/s/z19sm
https://react-select.com/creatable

To Reproduce
Steps to reproduce the behavior:

Go to the reproduction link
Type anything to create an option then enter
The inputted value is not displayed

Expected behavior
The created value should be displayed.

Thanks.

[BUG] Select properties not found

Hey!

Thanks for this awesome lib, but recently I had a problem with it:

I imported the "import { Select, CreatableSelect } from "chakra-react-select";"
and still it says that these properties (neither ismulti, nor options) are available in the props:

Can you help me out what is going on? I just tried to check the examples on the site, but not working:/
(Followed these examples: https://codesandbox.io/s/chakra-react-select-demo-65ohb?file=/example.js)

[BUG] menuIsOpen broken in 4.2.1

Description

Looks like the changes in 4.2.1 for read-only behaviour broke the controlled functionality of react-select.

minimal repro: https://codesandbox.io/s/chakra-react-select-menuisopen-fjzmyt?file=/src/App.tsx

changing the dep to 4.2.0 in that CSB shows it working as intended

thanks!

chakra-react-select Version

4.2.1

Link to Reproduction

https://codesandbox.io/s/chakra-react-select-menuisopen-fjzmyt?file=/src/App.tsx

TypeScript?

Yes I use TypeScript

Steps to reproduce

set menuIsOpen to true
menu is not open

Operating System

Additional Information

No response

[BUG] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Description

chakra-react-select requires @chakra-ui/react: 2.2.1. It breaks on @chakra-ui/react: 2.2.0

chakra-react-select Version

4.0.1

Link to Reproduction

https://codesandbox.io/s/naughty-visvesvaraya-i8b13i?file=/pages/index.tsx

TypeScript?

Yes I use TypeScript

Steps to reproduce

Go to '...'
Click on '...'
Scroll down to '...'
See error

Operating System

Additional Information

No response

[QUESTION] how i can set selectedOptionColor as hexa

i am try to set hexa color ( #E8F3FE ) on selectedOptionColor but i got the following css:

background: E8F3FE.500

what is wrong ?

[FEATURE] Please exported out all Select Interface

Describe the solution you'd like
I want to create custom component in my project with this chakra-react-select. I need the interface for all Select props so i can make it become a component. I need it as soon as possible. Thanks!

[BUG] Latest build doesn't include types

Description

It looks like types weren't included beyond 3.3.3.

chakra-react-select Version

3.3.3

Link to Reproduction

No response

TypeScript?

Yes I use TypeScript

Steps to reproduce

Install chakra-react-select
View node-modules/chakra-react-select/dist
Observe types directory missing

Operating System

Additional Information

No response

[BUG] ESM No matching export for import "MultiValueProps"

Describe the bug
When upgrading to v3 we are seeing the following build error for ESM (using ViteJS as a build runner):

node_modules/chakra-react-select/dist/esm/types.js:2:9: error: No matching export in "node_modules/react-select/dist/react-select.esm.js" for import "MultiValueProps"

Additional context
If we remove/comment out the line import { MultiValueProps } from "react-select"; in dist/ems/types.js everything works as expected

[BUG] Input color in dark mode is not visible.

Describe the bug
When using the latest build (2.0.0) switching to dark mode, the input text is un-readable. Attempting to change the color with theme props, doesn't work.

Link to Reproduction
A link to a CodeSandbox with a minimal reproduction of the bug you're experiencing.

Fork one of these template projects to get started:

To Reproduce
Steps to reproduce the behavior:

Switch to dark mode
Type in the input box

Expected behavior
To be able to see text being submitted

Screenshots

Desktop (please complete the following information):
All platforms.

Additional context
Switching back to 1.3.4 fixed the issue.

[QUESTION] zIndex when using menuPortalTarget

Hey,
is there a way to change the zIndex when using a portal to move the dropdown to document.body?
In react-select there's the styles property where you can customize CSS of the portal, like this:

<Select menuPortalTarget={document.body} styles={{menuPortal: (provided) => {...provided, zIndex: 100} }}/>

Unfortunately, the menuPortal property doesn't seem to exist in chakra-react-select in chakraStyles. Is there any way to change the zIndex on the portal?

[QUESTION] How to change mapping option label/value to id/name

Thank you for your nice contribution.

Default option type is

{
   value: "coffee",
   label: "Coffee",
}

But I want to use like this

{
   id: "coffee",
   name: "Coffee",
}

How can I do that?

Support for react hook form

The component seems to break when attempting to validate the number of inputs using the register function in react hook form. Is it possible for you to add support for react hook form?

[BUG] Unable to focus or search using React Production mode.

Describe the bug
Using the dev build of react, my select component works perfectly.
However, once I go to prod build, the component is unable to be focused and search no longer works.
I went through the dom and the only difference I can find is that on the dev build, the following element exists:

All of the other Chakra components works 100% fine, it's just the chakra-react-select component.
Is there any known issue with production builds or minifying?

To Reproduce
Steps to reproduce the behavior:
Can't provide reproduction since it would require a production build.
I'm using create-react-app so really there shouldn't be any weirdness.

Desktop (please complete the following information):

OS: Mac
Browser Chrome
Version 1.8.7 (but i checked older versions and the issue remains)

Additional context
I'm assuming other people aren't having issues with this, but there's no reason that only this library is affected.
The only thing I can think of is some unlisted dependency issue.
Any tips would be greatly appreciated.

[BUG]

Description

When I press the tab key while a select list is open I expect the next focusable element to be focused. Instead, items from the list are added to the current selection.

chakra-react-select Version

4.1.3

Link to Reproduction

https://codesandbox.io/s/chakra-react-select-vsvr0?file=/example.js

TypeScript?

Yes I use TypeScript

Steps to reproduce

Go to https://codesandbox.io/s/chakra-react-select-vsvr0?file=/example.js
Tab into select
Press down arrow to open list
Press tab a few times

Operating System

Additional Information

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

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

[BUG] Can't add custom props for MenuList via innerProps

Description

When I add custom properties on innerProps for MenuList (like data-testid) they are ignored. It seems they aren't exploded in MenuList component. The original react-select library allows that.

chakra-react-select Version

3.3.7

Link to Reproduction

https://codesandbox.io/s/react-select-playground-forked-nqwxik?file=/src/index.tsx

TypeScript?

Yes I use TypeScript

Steps to reproduce

No response

Operating System

Additional Information

No response

[QUESTION] Is there a way to use the main style of chakra ui as props ?

My question is...
I made some custom components and I have some difficulties to custom the Select element, is there a way to make it extends the chakra ui Select props? so I can use the bg, _hover and the other props

Custom component I mentioned

[QUESTION] Is there a way to support larger Size properties?

Thanks for the good work with this component.

In my chakra-ui project, I had to create xl, 2xl and 3xl properties for Button and Input. I'm mainly changing height, paddingX and fontSize between those sizes because I just want a bigger elements.

Scanning through chakra-react-select code I realized that there is only support for the default chakra-ui props. Is there any way to support for other sizes? The docs says that xs was too small, but besides that, can the component just extend those properties from the main theme?

[QUESTION] Eliminate unnecessary dependencies

I use the package @chakra-ui/react and it contains all the packages that I get the warning message

warning " > [email protected]" has unmet peer dependency "@chakra-ui/form-control@^1.0.0".        
warning " > [email protected]" has unmet peer dependency "@chakra-ui/icon@^2.0.0".
warning " > [email protected]" has unmet peer dependency "@chakra-ui/layout@^1.0.0".
warning " > [email protected]" has unmet peer dependency "@chakra-ui/menu@^1.0.0".
warning " > [email protected]" has unmet peer dependency "@chakra-ui/spinner@^1.0.0".
warning " > [email protected]" has unmet peer dependency "@chakra-ui/system@^1.2.0".

can you remove them in upcoming updates

[QUESTION] Adding floating labels to Creatable Select

Hi ! Thanks for this wonderful library that has made dropdowns much more robust and easy to work with :)
I would just like to know if there was some way of including floating labels with the Creatable Select component? This is what i have done so far

import { extendTheme } from "@chakra-ui/react"

const activeLabelStyles = {
    transform: 'scale(0.85) translateY(-24px)',
}

export const theme = extendTheme({
    components: {
        Form: {
            variants: {
                floating: {
                    container: {
                        _focusWithin: {
                            label: {
                                ...activeLabelStyles,
                            },
                        },
                        'input:not(:placeholder-shown) + label, .chakra-select__wrapper + label, .react-date-picker + label': {
                            ...activeLabelStyles,
                        },
                        label: {
                            top: 0,
                            left: 0,
                            zIndex: 2,
                            position: 'absolute',
                            backgroundColor: 'white',
                            pointerEvents: 'none',
                            mx: 3,
                            px: 1,
                            my: 2,
                            transformOrigin: 'left top'
                        },
                    },
                },
            },
        },
    },
})

Unfortunately, the placeholder covers up the selected value when focus leaves the component, and I haven't been able to figure out a way to apply the above theme to the CreatableSelect. This is what my CreatableSelect looks like :

<FormControl id="place" isRequired>
    <FormLabel>Place</FormLabel>
    <CreatableSelect size='xl'
        name="place"
        options={locality}
        closeMenuOnSelect={true}
        value={place}
        tabSelectsValues
        onChange={setPlace}
        openMenuOnFocus
        placeholder={"Select/Type a place"}
    />
</FormControl>

[BUG] Multi-select with a custom component has broken focus

Describe the bug
A clear and concise description of what the bug is.

Link to Reproduction
A link to a CodeSandbox with a minimal reproduction of the bug you're experiencing.
https://codesandbox.io/s/chakra-react-select-custom-option-forked-cglhg?file=/example.js:1662-2098

Steps to reproduce

Have a multi selector, with a custom component, and a state controlled value. (value={selectedValues}).
Select a value from the selector, then try to click off of the menu to close the select menu.
Notice it's impossible to close the select menu unless you click the select button again. It will remain in focus in the background and cause problems for other components.

Expected behavior
The select menu closes when you click off the menu, and focus is removed.

Screenshots

Desktop (please complete the following information):

OS: MacOS
Browser Chrome

[QUESTION] Props in custom component

My question is...
Hi dev!

I would like to ask for some help in creating a custom component with the chakra-react-select in typescript. I'm struggling with the Select props in my component, because the props are not showing up in the custom component.

Can you please provide a code example?

I appreciate your attention!

[BUG] Search box input shown with blue box-shadow and padding 0.75rem

I don't know why, but my select search keep showing annoying box-shadow and padding like this, and i can't fix it. Please help me point out the issue. Every help is appreciated! Thanks.

Turn it off by using debug. :'(

Just using guilded piece of code

[BUG] Ordering style issue on @emotion/css or @emotion/react when call any component form chakra-react-select

Describe the bug
This issue happened when call any component from chakra-react-select to your codes. Normally we can easily overwrite Chakra-UI Provider default Theme but after calling any component from chakra-react-select it changed the ordering and cause emotion become unable to overwrite the styling

How To Reproduce
This bugs only happened when you start calling any chakra-react-select component to your codes, if you only install it won't change anything

Expected behavior
Expected chakra-ui default style to be low priority

Screenshots
[Before]

[After]

[QUESTION] Cannot read properties of undefined (reading 'value') - i18n locales

I'd like to change the locale: "en" and "pl" but I occured an error Cannot read properties of undefined (reading 'value')
here

  const changeLanguage = e => {
> 63 |     const locale = e.target.value
     |                            ^
  64 |     router.push(router.pathname, router.asPath, { locale })
  65 |   }

changing the locale logic

const Navbar = props => {
  const { path } = props
  const router = useRouter()
  const { locale } = router
  const t = locale === 'en' ? en : pl

  const changeLanguage = e => {
    const locale = e.target.value
    router.push(router.pathname, router.asPath, { locale })
  }

Here is my Select component

<Select
  onChange={changeLanguage}
  defaultValue={locale}
  width="74px"
  display={{ base: 'none', md: 'inline-block' }}
  variant="outline"
  cursor="pointer"
  ml="30px"
  options={[
    {
      label: 'EN',
      value: 'en'
    },
    {
      label: 'PL',
      value: 'pl'
    }
  ]}
/>

the previous one chakra's one orginal which worked

<Select
  onChange={changeLanguage}
  defaultValue={locale}
  width="74px"
  display={{ base: 'none', md: 'inline-block' }}
  variant="outline"
  cursor="pointer"
  ml="30px"
  _focus={{
    boxShadow: 'teal'
  }}
>
  <option value="en">EN</option>
  <option value="pl">PL</option>
</Select>

[QUESTION] How to customize component colors

Thank you for a great multiselect component. It is working great.

How can one customize eg background or border colors for the component?

Installing the library causes emotion error

Installing this library and using it in conjuncture with either next.js or storybook causes emotions errors during the startup of dev servers.

Using next.js I get this error:

next-translate - compiled page: /albums/new - locale: en - namespaces: common - used loader: getStaticProps
error - TypeError: stylis.middleware is not a function
    at Object.createCache [as default] (/Users/johannesklauss/Documents/Github/Syra/node_modules/@emotion/react/node_modules/@emotion/cache/dist/emotion-cache.cjs.dev.js:331:30)
    at EmotionGlobal (/Users/johannesklauss/Documents/Github/Syra/node_modules/@emotion/react/dist/emotion-element-ce965253.cjs.dev.js:59:48)
    at processChild (/Users/johannesklauss/Documents/Github/Syra/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/johannesklauss/Documents/Github/Syra/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/johannesklauss/Documents/Github/Syra/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/johannesklauss/Documents/Github/Syra/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/Users/johannesklauss/Documents/Github/Syra/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/johannesklauss/Documents/Github/Syra/node_modules/next/dist/server/render.js:596:45)
    at Function.getInitialProps (webpack-internal:///../../node_modules/next/dist/pages/_document.js:194:19)
    at Object.loadGetInitialProps (/Users/johannesklauss/Documents/Github/Syra/node_modules/next/dist/shared/lib/utils.js:69:29)

Using storybook I get this error:

bootstrap:27 Uncaught TypeError: (0 , stylis__WEBPACK_IMPORTED_MODULE_0__.middleware) is not a function
    at createCache (emotion-cache.browser.esm.js:287)
    at Object../node_modules/@emotion/react/dist/emotion-element-99289b21.browser.esm.js (emotion-element-99289b21.browser.esm.js:17)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (emotion-serialize.browser.esm.js:314)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)
    at Object../node_modules/@storybook/theming/node_modules/@emotion/styled/dist/styled.browser.esm.js (memoize.browser.esm.js:9)
    at __webpack_require__ (bootstrap:24)
    at fn (hot module replacement:61)

The weirdest thing is that this also happens when I am not even using the library. Only when I remove the library the errors go away.

I have the following setup (the next.js app gets bundled with webpack5):

"@chakra-ui/react": "1.6.10",
"@emotion/react": "11.5.0",
"@emotion/server": "11.4.0",
"@emotion/styled": "11.3.0",
"chakra-react-select": "1.3.2",
"framer-motion": "4.1.17",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",

And I am using Storybook with webpack5:

"@storybook/addon-essentials": "6.3.0",
"@storybook/addon-knobs": "6.3.1",
"@storybook/addon-links": "6.3.0",
"@storybook/builder-webpack5": "6.3.0",
"@storybook/manager-webpack5": "6.3.0",
"@storybook/react": "6.3.0",

Chakra itself works fine and is correctly setup. Only after installing this library the error occurs. Any idea what might causing it?

[QUESTION] How do you get the values from the select element

My question is...
Hello, First let me congratulate you for such a great job with this control, I would like to know how I get the list of values of the selected elements

Colors not working in demos

Describe the bug
The "select colors" examples do not display colors correctly.

Example: "Select Colors and Flavours / md" example -- all selections are grey.

Example: "Select Colors and Flavours / with global" -- all selections are purple.

Link to Reproduction

The demos you list from this repo's README:

To Reproduce
Steps to reproduce the behavior:

Visit either demo sandbox
Click a few options in each example

Expected behavior
Each selection should use the color of the name selected, as in the README screen shot.

Screenshots

Desktop (please complete the following information):

OS: OSX
Browser: Chrome 98.0.4758.102

isReadOnly doesn't work

Description

When property isReadOnly={true} select is still editable

chakra-react-select Version

4.1.5

Link to Reproduction

No response

TypeScript?

Yes I use TypeScript

Steps to reproduce

set isReadOnly={true}
try to edit the select

Operating System

Additional Information

I fixed this issue by wrapping component in div with style pointerEvents: "none"

[QUESTION] regarding styling

My question is...
I want to change colors & other css properties, even classNamePrefix of react-select isn't working with the component, menu list doesn't get the prefix

Deselecting item when disabled

Description

If the selection is disabled (isDisabled={true}), the selected option can still be deselected by clicking on the cross.

chakra-react-select Version

2.0.0

Link to Reproduction

No response

TypeScript?

Yes I use TypeScript

Steps to reproduce

Select some items
Disable select
Deselect them by clicking on the cross

Operating System

Additional Information

No response

[BUG] When upgrading to React18/Chakra2: createStylesContext is not a function

Description

After upgrading to React 18 / Chakra v2 I am hitting one last issue from this package. I am seeing this message:

(0 , _chakra_ui_system__WEBPACK_IMPORTED_MODULE_1__.createStylesContext) is not a function

I've tried rolling back but just get useContext errors. Any tips here would be great; I'd love to complete this upgrade :)

 >  NX   Report complete - copy this into the issue template

   Node : 16.15.1
   OS   : darwin arm64
   yarn : 1.22.19

   nx : 14.4.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.4.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.4.2
   @nrwl/eslint-plugin-nx : 14.4.2
   @nrwl/express : Not Found
   @nrwl/jest : 14.4.2
   @nrwl/js : 14.4.2
   @nrwl/linter : 14.4.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.4.2
   @nrwl/nx-cloud : 14.2.0
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.4.2
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.4.2
   @nrwl/web : 14.4.2
   @nrwl/workspace : 14.4.2
   typescript : 4.7.4
   ---------------------------------------

package.json

{
  "name": "flowpath",
  "version": "0.0.0",
  "license": "none",
  "scripts": {
    "postinstall": "tsc -p tools/tsconfig.tools.json"
  },
  "private": true,
  "engines": {
    "node": ">= 16.0.0",
    "npm": ">= 6.0.0",
    "yarn": ">= 1.0.0"
  },
  "dependencies": {
    "@amcharts/amcharts5": "^5.2.10",
    "@amcharts/amcharts5-geodata": "^5.0.3",
    "@appsignal/javascript": "^1.3.23",
    "@appsignal/react": "^1.0.20",
    "@chakra-ui/icons": "^2.0.4",
    "@chakra-ui/react": "^2.2.4",
    "@dnd-kit/core": "^6.0.5",
    "@dnd-kit/modifiers": "^6.0.0",
    "@dnd-kit/sortable": "^7.0.1",
    "@dnd-kit/utilities": "^3.2.0",
    "@emotion/react": "11.9.3",
    "@emotion/styled": "11.9.3",
    "@fontsource/nunito-sans": "^4.5.8",
    "@fortawesome/fontawesome-svg-core": "6.1.1",
    "@fortawesome/pro-light-svg-icons": "6.1.1",
    "@fortawesome/pro-solid-svg-icons": "6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@hookform/resolvers": "^2.9.6",
    "@khanacademy/react-multi-select": "^0.3.3",
    "@loadable/component": "^5.15.2",
    "@react-hook/window-size": "^3.0.7",
    "@react-hookz/web": "^15.0.1",
    "@splitsoftware/splitio-react": "^1.6.0",
    "@storybook/builder-webpack5": "6.5.9",
    "@storybook/core-server": "6.4.22",
    "@storybook/manager-webpack5": "6.5.9",
    "@tanstack/react-location": "^3.7.4",
    "@tanstack/react-virtual": "^3.0.0-beta.2",
    "@trendmicro/react-sidenav": "^0.5.0",
    "axios": "^0.27.2",
    "boring-avatars": "^1.7.0",
    "buffer": "^6.0.3",
    "chakra-react-select": "4.1.3",
    "change-case": "^4.1.2",
    "chroma-js": "^2.4.2",
    "classnames": "^2.3.1",
    "core-js": "^3.21.1",
    "d3": "^7.3.0",
    "date-fns": "^2.28.0",
    "downshift": "^6.1.7",
    "formik": "^2.2.9",
    "framer-motion": "^6.5.1",
    "html5-qrcode": "^2.2.1",
    "http-status-codes": "^2.2.0",
    "interactjs": "^1.10.11",
    "just-debounce-it": "^3.0.1",
    "lodash.debounce": "^4.0.8",
    "lodash.isempty": "^4.4.0",
    "lodash.isequal": "^4.5.0",
    "md5": "^2.3.0",
    "moment": "^2.29.3",
    "moment-timezone": "^0.5.34",
    "notification-service-js": "^0.6.2",
    "pluralize": "^8.0.0",
    "pondjs": "^0.9.0",
    "query-string": "^7.1.1",
    "randomcolor": "^0.6.2",
    "rc-time-picker": "^3.7.3",
    "react": "18.2.0",
    "react-accessible-accordion": "^3.3.5",
    "react-autocomplete-input": "^1.0.18",
    "react-beautiful-dnd": "^13.1.0",
    "react-big-calendar": "^0.40.1",
    "react-calendar-timeline": "^0.27.0",
    "react-code-blocks": "^0.0.9-0",
    "react-collapsible": "^2.8.4",
    "react-confirm-alert": "^2.8.0",
    "react-csv": "^2.2.2",
    "react-date-range": "^1.4.0",
    "react-datepicker": "^4.8.0",
    "react-dates": "^21.8.0",
    "react-datetime-picker": "^3.5.0",
    "react-debounce-input": "^3.2.5",
    "react-dom": "18.2.0",
    "react-dropdown-tree-select": "^2.7.1",
    "react-dropzone": "^14.2.2",
    "react-fade-in": "^2.0.1",
    "react-fast-compare": "^3.2.0",
    "react-floating-action-button": "^1.0.5",
    "react-fullstory": "^1.4.0",
    "react-google-recaptcha": "^2.1.0",
    "react-grid-layout": "^1.3.4",
    "react-highlight-words": "^0.18.0",
    "react-hook-form": "^7.33.1",
    "react-html5-camera-photo": "^1.5.10",
    "react-images-upload": "^1.2.8",
    "react-images-uploading": "^3.1.7",
    "react-is": "18.2.0",
    "react-linkify": "^1.0.0-alpha",
    "react-linkify-it": "^1.0.7",
    "react-loading": "^2.0.3",
    "react-loading-overlay": "^1.0.1",
    "react-map-gl": "^6.1.17",
    "react-minimal-pie-chart": "^8.2.0",
    "react-modal": "^3.15.1",
    "react-multi-date-picker": "^3.3.0",
    "react-number-format": "^4.9.3",
    "react-qr-code": "^2.0.7",
    "react-query": "^3.39.2",
    "react-recaptcha": "^2.3.10",
    "react-redux": "8.0.2",
    "react-router": "^6.3.0",
    "react-router-dom": "6.3.0",
    "react-select": "^5.2.2",
    "react-show-more-text": "^1.5.2",
    "react-sweet-progress": "^1.1.2",
    "react-table": "^7.8.0",
    "react-table-v6": "^6.8.6",
    "react-tag-autocomplete": "^6.2.0",
    "react-tag-input": "^6.8.0",
    "react-textarea-autosize": "^8.3.4",
    "react-timeseries-charts": "^0.16.1",
    "react-to-print": "^2.14.7",
    "react-tooltip": "^4.2.21",
    "react-transition-group": "^4.4.2",
    "react-use": "^17.4.0",
    "react-use-intercom": "^2.0.0",
    "react-vis": "^1.11.7",
    "react-weekly-day-picker": "^1.0.3",
    "react-window-size": "^1.2.2",
    "reactjs-popup": "^2.0.5",
    "redux": "^4.1.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.3.0",
    "regenerator-runtime": "0.13.9",
    "rooks": "^5.11.8",
    "styled-components": "5.3.5",
    "three": "0.142.0",
    "tslib": "^2.0.0",
    "us-zips": "^2021.11.4",
    "use-places-autocomplete": "^4.0.0",
    "vanta": "^0.5.22",
    "webpack-retry-chunk-load-plugin": "^3.1.1",
    "workbox-core": "^6.5.3",
    "workbox-expiration": "^6.5.3",
    "workbox-precaching": "^6.5.3",
    "workbox-routing": "^6.5.3",
    "workbox-strategies": "^6.5.3",
    "workbox-webpack-plugin": "^6.5.3",
    "yup": "^0.32.11",
    "zod": "^3.17.3",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "7.18.6",
    "@babel/preset-typescript": "7.18.6",
    "@chakra-ui/cli": "^2.1.2",
    "@faker-js/faker": "^7.3.0",
    "@hookform/devtools": "^4.2.2",
    "@netlify/functions": "^1.0.0",
    "@nrwl/cli": "14.4.2",
    "@nrwl/cypress": "14.4.2",
    "@nrwl/eslint-plugin-nx": "14.4.2",
    "@nrwl/jest": "14.4.2",
    "@nrwl/js": "14.4.2",
    "@nrwl/linter": "14.4.2",
    "@nrwl/node": "14.4.2",
    "@nrwl/nx-cloud": "14.2.0",
    "@nrwl/react": "14.4.2",
    "@nrwl/storybook": "14.4.2",
    "@nrwl/web": "14.4.2",
    "@nrwl/workspace": "14.4.2",
    "@playwright/test": "^1.23.3",
    "@snek-at/storybook-addon-chakra-ui": "^1.0.0",
    "@storybook/addon-essentials": "6.5.9",
    "@storybook/react": "6.5.9",
    "@svgr/webpack": "^6.2.1",
    "@tanstack/react-location-devtools": "^3.4.4",
    "@testing-library/react": "13.3.0",
    "@types/jest": "27.4.1",
    "@types/moment": "^2.13.0",
    "@types/node": "18.0.0",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "@types/react-grid-layout": "^1.3.2",
    "@types/react-is": "17.0.3",
    "@types/react-router-dom": "5.3.3",
    "@types/styled-components": "5.1.25",
    "@typescript-eslint/eslint-plugin": "5.30.6",
    "@typescript-eslint/parser": "5.30.6",
    "@welldone-software/why-did-you-render": "^7.0.1",
    "babel-jest": "28.1.3",
    "babel-loader": "8.2.5",
    "babel-plugin-styled-components": "2.0.7",
    "copyfiles": "^2.4.1",
    "cors": "^2.8.5",
    "csstype": "^3.0.11",
    "cypress": "^8.3.0",
    "eslint": "8.15.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-deprecation": "^1.3.2",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsdoc": "^39.3.3",
    "eslint-plugin-jsx-a11y": "6.6.0",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "eslint-plugin-react": "7.30.1",
    "eslint-plugin-react-hooks": "4.6.0",
    "express": "^4.18.1",
    "helmet": "^4.6.0",
    "heroku-ssl-redirect": "^0.1.1",
    "jest": "27.5.1",
    "namor": "^2.0.4",
    "node-fetch": "^3.2.8",
    "nx": "14.4.2",
    "prettier": "2.7.1",
    "prettier-plugin-sh": "^0.12.6",
    "react-test-renderer": "18.2.0",
    "source-map-explorer": "^2.5.2",
    "ts-jest": "27.1.4",
    "typescript": "4.7.4",
    "url-loader": "^4.1.1",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-merge": "^5.8.0",
    "webpack-stats-plugin": "^1.0.3"
  }
}

chakra-react-select Version

4.1.3

Link to Reproduction

Of course this is a private repo so no public repro 😞

TypeScript?

Yes I use TypeScript

Steps to reproduce

Build app

Operating System

Additional Information

[BUG] Type 'true' is not assignable to type 'false'

Am having issues with the isMulti property of the chakra react's select. The isMulti works when am not defining any styles object attached to the component, but if I defined some styling object extending the ChakraStyleConfig. Then typescript beings to frown to the isMulti Property.
This is my code below...

const SelectComponent = ({
  label,
  options,
  placeholder,
  isMultiple,
  handleChange,
}: IProps) => {

  const chakraStyles: ChakraStylesConfig = {
    container: (provided, state) => ({
      ...provided,
      border: "0.3px solid",
      borderColor: state.isFocused ? "blue.300" : "black",
      _hover: {
        borderColor: "ash.300",
      },
      _active: {
        borderColor: "blue.300",
      },
      borderRadius: "5px",
      outline: "transparent",
    }),
    control: (provided, state) => ({
      ...provided,
      border: "none",
      background: "none",
      fontSize: "15px",
    }),
    input: (provided, state) => ({
      ...provided,
      fontSize: "15px",
    }),
  };

  return (
    <FormControl w="full">
      <FormLabel color="#718096" fontSize="13px" fontWeight="600" mb="5px">
        {label}
      </FormLabel>
      <Select
        isMulti
        name="colors"
        focusBorderColor="blue.300"
        placeholder={placeholder}
        options={options}
        onChange={(e: any) => handleChange(e)}
        chakraStyles={chakraStyles}
      />
    </FormControl>
  );
};

This is the image of the warning typescript wants me to fix

So after removing the chakraStyles

I dont know what is going on or what am doing wrong, Kindly help

[QUESTION] TypeError: Cannot read property 'Tag' of undefined

I added your package to use multi select and my tests broke. Do you have any idea what it might be?

Exported Types Wrong?

Thanks for creating this component. However, the types shipped with the component reuse the Chakra props of Select, rather than the different props that react-select use (for example, isMulti is not supported and you can't set the options).

[BUG] You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems.

Describe the bug
It's happened because of react-select have it's own react-select version

Link to Reproduction
A link to a CodeSandbox with a minimal reproduction of the bug you're experiencing.

Screenshots

[FEATURE] react-hook-form support

It would be great if this component would support react-hook-form, so that you can set an error validation or policy like a normal chakra ui select with {...register}, e.g. whether the field is required or not.

[BUG] menuPlacement prop isn't working

Describe the bug
menuPlacement

Link to Reproduction
A link to a CodeSandbox with a minimal reproduction of the bug you're experiencing.

Expected behavior
menuPlacement prop gets passed along to react-select

csandman / chakra-react-select Goto Github PK

chakra-react-select's Introduction

Screenshotr - https://screenshotr.app/

Slice Map - https://slicemap.com/

chakra-react-select's People

Contributors

Stargazers

Watchers

Forkers

chakra-react-select's Issues

Description

chakra-react-select Version

Link to Reproduction

TypeScript?

Steps to reproduce

Operating System

Additional Information

Description

chakra-react-select Version

Link to Reproduction

TypeScript?

Steps to reproduce

Operating System

Additional Information

Description

chakra-react-select Version

Link to Reproduction

TypeScript?

Steps to reproduce

Operating System

Additional Information

Description

chakra-react-select Version

Link to Reproduction

TypeScript?

Steps to reproduce

Operating System

Additional Information

Description

chakra-react-select Version

Link to Reproduction

TypeScript?

Steps to reproduce

Operating System

Additional Information

Description

chakra-react-select Version

Link to Reproduction

TypeScript?

Steps to reproduce

Operating System

Additional Information

Description

chakra-react-select Version

Link to Reproduction

TypeScript?

Steps to reproduce

Operating System

Additional Information

Description

chakra-react-select Version

TypeScript?

Operating System

Description

chakra-react-select Version

Link to Reproduction

TypeScript?

Steps to reproduce

Operating System

Additional Information

Description

chakra-react-select Version

Link to Reproduction

TypeScript?

Steps to reproduce

Operating System

Additional Information

Description

chakra-react-select Version

Link to Reproduction