vueform / multiselect

Vue 3 multiselect component with single select, multiselect and tagging options (+Tailwind CSS support).
https://vueform.com
MIT License
796 stars 148 forks source link

Empty values in createOption with trimmed value #409

Open mathieutu opened 4 months ago

mathieutu commented 4 months ago

Version

Description

Hi, thanks for your work. I'm trying to trim values that are created. However, if you only enter a space , we can avoid to create the option but not avoid to show and empty one in the list.

Ex: (spaces are in the search bar)

Screenshot 2024-05-11 at 14 30 57 Screenshot 2024-05-11 at 14 31 12

It would be great to be able to sanitize the search query to trim the value here directly.

Another solution would be to execute onCreate directly in createdOption, so we would filter it directly, and even allow to change the property (including label, when showed). https://github.com/vueform/multiselect/blob/f8af61b2628337fdb66f5dec6982fb6e73f2caac/src/composables/useOptions.js#L210-L225

Happy to create the PR if you want to.

Demo

https://jsfiddle.net/hvko13n0/2/

mathieutu commented 4 months ago

For now I patched the package with:

   const handleSearchInput = (e) => {
-    search.value = e.target.value;
+    search.value = e.target.value.trim();
   };

And it seems to work great.