csandman / chakra-react-select Goto Github PK
View Code? Open in Web Editor NEWA Chakra UI themed wrapper for the popular library React Select
Home Page: https://www.npmjs.com/package/chakra-react-select
License: MIT License
A Chakra UI themed wrapper for the popular library React Select
Home Page: https://www.npmjs.com/package/chakra-react-select
License: MIT License
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!
4.1.4
No response
No response
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.
4.1.3
https://codesandbox.io/s/chakra-react-select-vsvr0?file=/example.js
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.
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"
}
}
4.1.3
Of course this is a private repo so no public repro ๐
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!
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?
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?
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:
Expected behavior
To be able to see text being submitted
Desktop (please complete the following information):
All platforms.
Additional context
Switching back to 1.3.4
fixed the issue.
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.
3.3.7
https://codesandbox.io/s/react-select-playground-forked-nqwxik?file=/src/index.tsx
No response
No response
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.
3.3.3
It looks like types weren't included beyond 3.3.3.
3.3.3
No response
chakra-react-select
node-modules/chakra-react-select/dist
types
directory missingNo response
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:
Expected behavior
The created value should be displayed.
Thanks.
i am try to set hexa color ( #E8F3FE ) on selectedOptionColor but i got the following css:
background: E8F3FE.500
what is wrong ?
chakra-react-select
requires @chakra-ui/react: 2.2.1
. It breaks on @chakra-ui/react: 2.2.0
4.0.1
https://codesandbox.io/s/naughty-visvesvaraya-i8b13i?file=/pages/index.tsx
No response
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>
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
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
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
If the selection is disabled (isDisabled={true}
), the selected option can still be deselected by clicking on the cross.
2.0.0
No response
No response
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.
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
4.0.0
No response
No response
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
When property isReadOnly={true}
select is still editable
4.1.5
No response
isReadOnly={true}
I fixed this issue by wrapping component in div
with style pointerEvents: "none"
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>
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>
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!
4.2.1
https://codesandbox.io/s/chakra-react-select-menuisopen-fjzmyt?file=/src/App.tsx
menuIsOpen
to trueNo response
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):
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.
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
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:
Expected behavior
It should remove the selected option.
Desktop (please complete the following information):
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?
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
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:
https://codesandbox.io/s/chakra-react-select-demo-65ohb?file=/example.js
https://codesandbox.io/s/chakra-react-select-ts-demo-vz9ut?file=/app.tsx
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Each selection should use the color of the name selected, as in the README screen shot.
Desktop (please complete the following information):
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?
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.
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)
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
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
value={selectedValues}
).Expected behavior
The select menu closes when you click off the menu, and focus is removed.
Desktop (please complete the following information):
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?
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
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:
Expected behavior
the select input should be empty
Desktop (please complete the following information):
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
).
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)
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.
4.0.0
https://codesandbox.io/s/chakra-ui-react-select-forked-1rmcdb
No response
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.