search

tbleckert / react-select-search

⚡️ Lightweight select component for React
https://react-select-search.com
MIT License
676 stars 147 forks source link

Close multi-select #75

Closed oyeanuj closed 4 years ago

oyeanuj commented 4 years ago

Hi @tbleckert, thank you for creating this useful library!

Similar to #37 and #56 , this question also relates to closing. I'm wondering how do I make a multi-select be a dropdown and close after selection (or with an 'X'). FWIW, most libraries like react-select or react-super-select allow you to have a dropdown, select multiple and then close the dropdown.

Any thoughts on how to make this happen?

tbleckert commented 4 years ago

Hi @oyeanuj . The primary goal of this component was to mimic the behavior of the built in HTML select, that's why I wen't with that design decision. But there is ways to make this happen.

Right now you have to alternatives to add this behavior yourself.

  1. Styling. You can simply hide the select area and display it on focus. On focus, the element gets the class has-focus. And multi selects already have the --multiple modifier. More on class names here https://github.com/tbleckert/react-select-search#custom-class-names . FYI, it's now possible to pass a function as the className for more control.

  2. We've made it possible to use this headless, meaning you write your own view components using hooks. https://github.com/tbleckert/react-select-search#headless-mode-with-hooks

tbleckert commented 4 years ago

A third option added to v1.2. You can now set printOptions to on-focus. This will only render the options list if the select has focus. Other options are: auto, always, never.