Select component about chakra-ui HOT 24 CLOSED

I'm not sure what the progress on this is but I wanted to share my wrapper for react-select's multi component. I needed something like this to use with Chakra and wanted it to look the same so I spent a decent amount of time making it match visually. If you want to use it, here's the source. Feel free to use/modify it as needed until an official Chakra version comes out.

• Gist: https://gist.github.com/csandman/c687a9fb4275112f281ab9a5701457e4
• CodeSandbox: https://codesandbox.io/s/chakra-ui-react-select-648uv?file=/chakra-react-select.js

I'm also curious if anyone has any recommendations to change this, I'm still very new to the inner workings of Chakra and I'm sure I didn't do everything in the best way.

EDIT

I've noticed that this has gotten a positive reception so I figured I'd post an update. The wrapper I posted is now updated to more accurately work with the react-select controls, and also now has a size prop! it can accept sm, md, and lg and it reflects the sizes of the normal chakra text input.

EDIT 2

I made it into an NPM package! https://www.npmjs.com/package/chakra-react-select

from chakra-ui.

Hi @Vynlar .

I'm currently trying to figure out the API for Chakra's Custom Select. I'd prefer we wrap an existing library and make the final API really simple and composable.

I also use react-select as well but I'm a bit reluctant to use it in Chakra due to its size. I'm currently testing use-downshift, a hook based library built for downshift and it's quite interesting and should give us the composition and functionality we need.

Here's how I envision the API for Chakra's Simple Select (pretty similar to native):

// Simple Select
<Select isSearchable={true} value="..." defaultValue="...">
   <Option value="...">Option 1</Option>
   <Option value="...">Option 2</Option>
</Select>

// Grouped Select
<Select isSearchable={true} value="..." defaultValue="...">
  <OptionGroup label="Option Group">
     <Option value="...">Option 1</Option>
    <Option value="...">Option 2</Option>
  </OptionGroup>
</Select>

The advantage of using use-downshift is that we can compose Autocomplete, Typeahead, and Multiselect out of it. Check out the docs: https://use-downshift.now.sh/docs-dropdown

Let me know what you think @Vynlar .

PS: I'm currently playing with it in CodeSandbox: https://codesandbox.io/s/chakra-playground-3tbl9

from chakra-ui.

For anyone that has had any interest in my wrapper for react-select, I finally made it into an NPM package! You can find it here: https://www.npmjs.com/package/chakra-react-select

from chakra-ui.

Here is another good one from Uber

https://baseweb.design/components/select/

from chakra-ui.

@segunadebayo use-downshift looks like a much better solution for Chakra than react-select does. It should let us create a great API that is homogenous with the existing Chakra components while still providing the features needed.

Looking forward to the first draft you come up with. Let the community know if we can help with any of these things.

from chakra-ui.

Hi @eranimo,

No work has started on it yet. I'll be happy to have you take a shot at the Select component. I'll open a new Issue for the API requirements of the Select component, then you can start some work once it's clear to you.

Thank you for choosing to contribute. Can't wait to see a Select component for Chakra.

from chakra-ui.

I think you can't go wrong with use-downshift it's smaller, simpler and the flexibility it provides is the most important thing for projects like this.

However, I'd suggest that if we're going to follow the 1st route from now on, then we should be more clear about what's contained inside "fancy", putting down the minimum api requirements would help before making decisions and suggestions, you've added some requirements in there but if we combine this with the ComboBox and the Tags Input that are also in the roadmap and can be considered as variants of this component, then it might make sense to use react-select since it'd cover these two as well.
tl;dr: The requirements has a direct impact in deciding how we implement the core component.

Also: great work guys, we've started using this on @cheerfulgiving it's been amazing so far, hope that we can contribute to this project ❤️

from chakra-ui.

Hi @fernandobandeira ,

Thank you for using Chakra UI @cheerfulgiving.

I'll create an issue that describes the minimum API requirements for the Select & ComboBox components. Then I'll get feedback from the community before building it.

Thanks for that suggestion.

from chakra-ui.

Thank you @Vynlar .

I do need help figuring out the react-popper issue #31 with the <MenuButton/>. I haven't looked at it yet and it'll be good to have someone look into it.

I'd be happy if you can jump on it.

from chakra-ui.

@Billmike Yes, I have started. Things have been crazy at work recently though, but I'll post a PR this weekend.

from chakra-ui.

Sorry, some things came up and I've been delayed getting this to a good point to PR.

from chakra-ui.

I'll create an issue that describes the minimum API requirements for the Select & ComboBox components.

@segunadebayo Please reference this issue when you do so, just to be able to follow the updates. I am eagerly waiting for Multi Select, the only feature that's stopping me from using Chakra in my two current projects.

Thank you for the library 👏

from chakra-ui.

Any updates on this? If work hasn't already started, I would be interested in contributing. A robust select component would really make this library feel complete.

from chakra-ui.

@segunadebayo Any update on the API requirements?

from chakra-ui.

Hi @eranimo @fernandobandeira @manzoorwanijk, I just added the API requirements for the Single Select component.

Let me know your thoughts.

After the Single Select, we'll tackle the MultiSelect component.

from chakra-ui.

@eranimo Has work begun yet on this component?

from chakra-ui.

Awesome then!

from chakra-ui.

Hey, any updates on this?

from chakra-ui.

It's been too long for me to wait for multiselect in Chakra UI, looks like I have to continue my struggle with AntDesign! 😞

from chakra-ui.

[Select] I've worked on the custom Select component but not the multiselect. It'll be out in the next release.

from chakra-ui.

I'm closing this out. Check updates on #140

from chakra-ui.

@segunadebayo I totally agree with a custom approach for building a powerful Chakra-UI Select component! Here's one using downshift... It covers pretty much the basics such as array of string or objects, autocomplete etc ... But it's a start point... https://github.com/catho/quantum/tree/master/components/Dropdown
https://catho.github.io/quantum/?path=/story/forms--dropdown

from chakra-ui.

There have been some major improvements in version 2 and version 3 of my chakra-react-select package, allowing for a fully customizable style system, and the native typescript support added in react-select@5. So if my component didn't feel customizable enough at first, or you had issues implementing it in a TypeScript project, I highly recommend giving it a second chance.

from chakra-ui.

Here's a version I started building for an app using Chakra UI components, if anyone also wants it.

Untitled.mov

Here's the CodeSandbox for reference – it's just a simple component, and it might not be 100% optimized for your application yet 🤓

https://codesandbox.io/s/chakra-ui-multiselect-kn2gvz?file=/src/multi-select.js

from: #1293 (comment)

from chakra-ui.