Vue-multiselect: In async mode: options are not displayed when search term is a number

Created on 6 May 2020  路  4Comments  路  Source: shentao/vue-multiselect

Hey again @shentao. I encoutered a strange bug that I am not yet able to resolve myself and could use a hint. Here is the scenario.

I have an api search endpoint that accepts a query and returns a list of objects of a certain type. You can search by string and by number.

I now use this plugin to trigger a debounced Ajax request each time the user types a character into the input field. The options prop is hooked to the response of the Ajax response by the api.

For some reason, the plugin won't display the list of options when the search query consists of numbers. Thanks to the vuejs devtools I can actually trace, that the response is given to the plugin via the prob.

I figured the options-filtering might be the suspect here, but I can't say for sure because I have not yet been able to reproduce my example within this repo. I was hoping you might immediately spot the issue. If not, no worries, I will get to it as fast as I can.

Reproduction Link

https://jsfiddle.net/L5o9bajw/

Steps to reproduce

In the js fiddle:

  • First type "tes" into the input field. One result pops up.
  • Then type "0901" into the input field. One result should show up, but won't.

The js fiddle is very close to my real world problem, therefore the strange queries.

Thanks again for taking the time! :)

question

All 4 comments

Hey! The issue comes from the fact, that even though you do filtering on your end (asynchronous or not), multiselect itself is still applying it鈥檚 own search (in this case using the description property that was passed as label. To fix that, you need to pass :internal-search="false" prop. This will turn off the internal search and will show the options as they are.

Well, that was quick and easy. Sry to bother, I must have missed it. I can confirm it is working now. Thank you yet again :)

It鈥檚 not the first time someone has this problem, so I assume it might be the docs that are unclear here. Got to get back to work on v3 (which is mostly functional). The new version comes with a lot of additional functionality. You can take a look at it on the v3 branch. There are even new docs based on VuePress.
But I never got myself to finish it. Mostly due to a11y work that is quite challenging (though I now feel much stronger about it than a year ago) and well, some confirmation that the direction I鈥檝e taken is the right one. If you would like to get involved, let me know! Maybe we could push it to the finish line and get an alpha release out there.

I'd love to participate. Shooting you a DM on Twitter this very moment.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

yaakovp picture yaakovp  路  3Comments

icebob picture icebob  路  4Comments

shsmad picture shsmad  路  3Comments

alexhyriavets picture alexhyriavets  路  3Comments

Uninen picture Uninen  路  4Comments