Scrolling is broken when a custom onServerSearch function Is defined

[MichalLauer]

Hello,

first of all, thanks for this great package!
I'm trying to implement a custom onServerSearch function, but when a user searches for a specific term, the scroll-down gets broken and all options dissapear. A minimal reprex is here:

 function searchLabel(searchValue, virtualSelect) {
   const searchWords = searchValue.split(/[\s\/]/);
   let grouped_data = [];
   virtualSelect.options.forEach(item => {
     item.isVisible = searchWords.every(word => item.label.match(new RegExp(`(?<!\S)${word}`, "giu")) !== null);
     grouped_data.push(item);
   });
   virtualSelect.setServerOptions(grouped_data);
 }
 VirtualSelect.init({
   ele: "#pick",
   multiple: true,
   search: true,
   keepAlwaysOpen: true,
   onServerSearch: searchLabel,
   options: [{ label: "a" },
             { label: "n" },
             { label: "u" },
             { label: "v" },
             { label: "w" },
             { label: "x" },
             { label: "y" },
             { label: "k" },
             { label: "p" },
             { label: "za" }
            ]
 });

If you try to search for "a" and scroll down, the selection breaks. I've been trying to figure this out for the past week but can't seem to get to the bottom of it.

Any idea why this might cause an issue?
Thanks!

[MichalLauer]

After a bit of searching, I think this issue could be related to #318 and/or #297.

In the meantine, I also created a codepen reprex which might help further narrow down the issue :)

[gnbm]

@sa-si-dev Could you help on this one?

[MichalLauer]

So the issue is that there is no call to virtualSelect.setVisibleOptionsCount(...); If this is manually included, there is no longer any issue - see here https://codepen.io/MichalLauer/pen/RwOqWgr.

Would it be possible to fix it somewhere in the package? I am not very familiar with JS project structure so I'm not sure where to include it.

Edit: So there might be something more going on. In my app, I am using a custom regex

function searchLabel(searchValue, virtualSelect) {
  ...
  const regex = new RegExp(`(?<!\S)${word}`, "gi");
  ...
}

and when I call the function virtualSelect.setVisibleOptionsCount(...);, the search no longer respects it and uses the default one. To make it respect the custom function, I need to manually set the counter:

```js
function searchLabel(searchValue, virtualSelect) {
  ...
  virtualSelect.setServerOptions(grouped_data);
  virtualSelect.visibleOptionsCount = visible;
  virtualSelect.afterSetVisibleOptionsCount();
}

The reprex can be found here - https://codepen.io/MichalLauer/pen/wvZQWpe.

[gnbm]

Hi @MichalLauer
I had a similar issue so I decided to look at the code and try to fix this.
Created a draft PR with a possible solution, could you please help validate this before opening the PR itself (I'm just having some issues running the tests, where 3 are failing, even though I can't manually get any error but would like double check to mitigate the risk of introducing any regression issue)?
You'll need to go ahead and get my branch, build it and use the Dev Tools overrides.

[gnbm]

Hi @MichalLauer
Did you get the chance to test the code from my draft PR?

[MichalLauer]

Hey,
I tried to build the branch yesterday but could not run any npm run or npm install commands because of authentication. I tried to create an NPM account, but that did not help either. I want to try again on Thursday. Do you have an idea what might have caused it? I tried googling, but nothing helped.

I am not primarily a JS developer, so I'm not very fluent with npm - I just know the basic stuff.

[gnbm]

Hey, I tried to build the branch yesterday but could not run any npm run or npm install commands because of authentication. I tried to create an NPM account, but that did not help either. I want to try again on Thursday. Do you have an idea what might have caused it? I tried googling, but nothing helped.

I am not primarily a JS developer, so I'm not very fluent with npm - I just know the basic stuff.

Hi @MichalLauer
I didn't have to do anything like that.
You should be able to run npm install and after that npm run build to generate the dist files

[gnbm]

Fixed in release v1.0.43.

[MichalLauer]

Hello,

thanks @gnbm for the update and PR! I'm sorry I did not manage to test the changes earlier.

I can confirm that the original issue (https://codepen.io/MichalLauer/pen/RwOqWgr) is fixed. However, a custom regex is still not respected in the version 1.0.43 and the previous code reprex on version 1.0.43 does not work - https://codepen.io/MichalLauer/pen/XWQOVpo.

There, I am using a custom regex to search and return values (line 5). For example, if you search for "c b a", I want to return all items that contain "c", "b", and "a". The regex correctly identifies them and prints them (lines 8 - 10). However, nothing is printed in the virtual select.

Should I create another issue for this?

[gnbm]

Hello @MichalLauer
The problem you're reporting is not related to the one you confirmed is fixed, so it should be treated separately.
Being a custom regex and a custom function I would first debug your code to understand if the issue is really in Virtual Select itself.