react-selectize icon indicating copy to clipboard operation
react-selectize copied to clipboard

Better UX experience for deleting multiselect values

Open hipertracker opened this issue 9 years ago • 6 comments

Is there any way to customize the selected "tag" value in the multi-select mode so I could just click on it's 'x' small icon to remove it from the selected list? This is how Select2 and react-select work. I think it's more intuitive for new users.

image

hipertracker avatar Aug 15 '16 15:08 hipertracker

you can do that by implementing the renderValue / renderOption props, see here (http://furqanzafar.github.io/react-selectize/#/?category=multi&example=custom-filtering-and-rendering)

furqanZafar avatar Aug 20 '16 19:08 furqanZafar

Maybe this will be useful to others. Example at http://cdpn.io/BQQdWG

chiester avatar Nov 17 '16 17:11 chiester

It would be useful to have a property in MultiSelect such as dismissibleTags that automatically generates tags with the close icon on each tag, as in my example. This is a common feature of tags and it would be nice for it to be generated for users so they don't have to go to the trouble of creating a custom renderValue function, css, etc.

Consider this a feature request.

chiester avatar Nov 18 '16 15:11 chiester

The original selectize js library has simple examples which let you click to select a tag in the multiselect.

https://selectize.github.io/selectize.js/#demo-tagging

Surprised react-selectize doesn't support that bit out of box.

twig avatar Apr 04 '17 12:04 twig

@twig tagging & item creation is supported http://furqanzafar.github.io/react-selectize/#/?category=multi&example=tags

furqanZafar avatar Apr 07 '17 05:04 furqanZafar

Yeah but you can't select them and then press delete like in the original selectize examples

twig avatar Apr 07 '17 05:04 twig