search

sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://vue-select.org
MIT License
4.65k stars 1.34k forks source link

:filterable="false" + :taggable="true" results in client-side filter #1399

Open lucianholt97 opened 3 years ago

lucianholt97 commented 3 years ago

Describe the bug When using service-based filtering with :filterable="false" to prevent client-side filtering this option is omitted when taggable is set to true. Since I am filtering based on multiple criteria on the server this results in very bad ux since the user does not see available options correctly.

To Reproduce Steps to reproduce the behavior:

  1. Set :filterable="false"
  2. Set :taggable="true"
  3. Use server-side filtering based on multiple criteria
  4. See error

Expected behavior The filterable option should be more important than the taggable option. If I want to get the current behavior I can still set filterable to true

Code Reference https://github.com/sagalbot/vue-select/blob/6e1c0dbcbd9971e5ec3a8260d5e035e6c53b8b08/src/components/Select.vue#L1160

FloEdelmann commented 3 years ago

As a workaround, you can set the filterBy prop to a function that always returns true: () => true

sagalbot commented 3 years ago

As @FloEdelmann mentioned, you can definitely use filterBy for this.

The solution proposed in #1399 breaks an existing test:

should select an existing option if the search string matches an objects label from options when filter-options is false

image