106
Views
12
Comments
Solved
[Multiple Selection Dropdown (ReactAndMob)] Search not working well with more than 2000 records
Application Type
Reactive

Hi Chris

If I load more than 2000 records into the dropdown, the search looks like it's unable to find some of the records, even though they are there.. (only the first few hundred items seem to return properly)

This is the same issue that was previously reported here

The previous poster said that if you scroll down on the "empty" dropdown , the items will suddenly appear (ie, they were there all the time, but they were not rendering).

I've attached a sample that loads a dropdown of 2000+ items. I hope it does'n try to install your component as well (which I modified slightly for testing).  There's a comment on the demo screen on how to simulate the problem.

The issue seem to be caused by the OutSystems List component that you are using. While the disable-virtualization attribute is not set to True, the List will regularly fail to properly render parts of a large list.

Once you set disable-virtualization to True, the dropdown displays search results without any issue, even when the records are right at the end of the list.

Hope the above makes sense.

Kind regards

DemoDropdownIssue.oml
UserImage.jpg
Chris Stacey
Solution

Hi @Pieter Swart ,

Thanks for your patience.

I'm excited to announce MultiSelect_ReactAndMob version 1.7.1 has been released.

Bugs Fixed

  • Fixed a bug where searching large lists (eg. normally, more than approx. 2,000 items) would not display some search results if they were too far down the list.

    Credit to Pieter Swart for educating me on Outsystems' virtualization in this forum post!


New Features

  • Added UI option: append the number of items to be (de)selected, to the "Select All" label.
    For example, instead of "Select All", the label might be "Select All (500)".
  • Added UI option: append the number of items to be (de)selected, to the "Select All Results" label.
    For example, instead of "Select All Results", the label might be "Select All Results (42)".


Changes to demo

  • Added performance tests for large lists (up to ~100,000 items), so developers can experiment - without the effort of first creating a test.

Hope this helps!

Please let me know if you have any issues!

Cheers,
Chris.

UserImage.jpg
Chris Stacey

Hi Pieter,

Thanks for the detailed feedback and for attaching an example !!

Apologies for the delayed response.

I will investigate this as soon as I can.

Kind Regards,
Chris.

UserImage.jpg
Chris Stacey

Well blow me down ... Pieter, you're a bloody legend mate !!!! 😀

Translated: Oh gosh (surprised) ... Pieter, you are awesome and deserve the highest praise !!!! 😀

Thank you so much for solving this issue !!!! ❤️


I would be grateful if people reading this would add a thumbs up to Pieter's post to let him know he's awesome.


I feel so much better about the stability of widget with large lists now
(which interestingly, more developers seem to want than I would have first thought).

Oh boy, I spent so much time going round in circles with this one.
At least now that I know the cause, I feel slightly better that it wasn't (directly) me.


I shall add the HTML attribute "disable-virtualization=True" to the list and release a new version.

Before I do, is there anything else you think should be changed?
(you mentioned you were editing the widget for testing)


Sincerely,
Chris.


(I'm using the term 'him' in a general sense. No offence is intended.)

UserImage.jpg
Pieter Swart

Hi

I'm glad I could help (helping you, helps me as well ;-) - I've been working with large lists recently so I'm familiar with the virtualization issue. 

When I noticed the search issue on one of my tests, I opened your component to check if there were some kind of internal limit. 

I could not find any and the code looked sound so I went to the Support forum to see if anybody else had experienced the same problem. 

When Joel mentioned that moving the list up and down made the items re-appear, I immediately recognized the behavior. I went back into the component to apply the virtualization attribute on the list and the problem was resolved (this was the only change I had made). 

The only thing that I picked up after the change was that the search rendering wasn't as smooth on the large lists as before, but the effect is so minor that it's barely noticeable.

Thanks!

UserImage.jpg
Chris Stacey

A little while later ... 

Hi Pieter,

I am pleased to tell you I have a permanent solution for this issue.

However, I am currently waiting on OutSystems Support to fix an error with the Forge Upload process. The error is preventing me from uploading the new solution. I have raised the issue as critical, and they have sent it to their back-end team. Fingers crossed it won't take too long.

I will reply back here when I know more.

Sincerely,
Chris

UserImage.jpg
Pieter Swart
UserImage.jpg
Chris Stacey
Solution

Hi @Pieter Swart ,

Thanks for your patience.

I'm excited to announce MultiSelect_ReactAndMob version 1.7.1 has been released.

Bugs Fixed

  • Fixed a bug where searching large lists (eg. normally, more than approx. 2,000 items) would not display some search results if they were too far down the list.

    Credit to Pieter Swart for educating me on Outsystems' virtualization in this forum post!


New Features

  • Added UI option: append the number of items to be (de)selected, to the "Select All" label.
    For example, instead of "Select All", the label might be "Select All (500)".
  • Added UI option: append the number of items to be (de)selected, to the "Select All Results" label.
    For example, instead of "Select All Results", the label might be "Select All Results (42)".


Changes to demo

  • Added performance tests for large lists (up to ~100,000 items), so developers can experiment - without the effort of first creating a test.

Hope this helps!

Please let me know if you have any issues!

Cheers,
Chris.

UserImage.jpg
Pieter Swart

Thanks Chris. When I try to install the new version, it looks like it is the demo and not the component. I even downloaded it by hand just to make sure that I'm not doing something wrong. Each time, the component was missing, but the demo was there. On the manual installation, I could also confirm that it was the demo that was installing:

Can you just have a look again?

Thanks!

UserImage.jpg
Chris Stacey

Drat. Thanks for letting me know Pieter! I’ll try again in a few hours.

UserImage.jpg
Chris Stacey

Thanks Pieter,

I've confirmed your findings. Both the asset and demo links, download the demo.

I'll re-raise the ticket with OutSystems support.

1min gif

The problem is OutSystems :(
The poor video editing is mine :)


UserImage.jpg
Chris Stacey

Hi Pieter,

OutSystems has now resolved the Forge issue.
The install buttons should now work correctly.

Kind Regards,
Chris

UserImage.jpg
Pieter Swart

Thanks Chris! I'm sure the OutSystems team was more than happy with the video. Always better to see the problem than just to read about it ;-)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.