feat: add virtualScroll option that could be disabled (#225)

* feat: add `virtualScroll` option that could be disabled

Author: ghiscoding

packages/demo/src/examples/example10.html

@@ -17,7 +17,10 @@ <h2 class="bd-title">
         </span>
       </span>
     </h2>
-    <div class="demo-subtitle">Virtual scroll will be used with a large set of data</div>
+    <div class="demo-subtitle">
+      Virtual Scroll will automatically be used with a large set of data.
+      We recommend keeping this option enabled at all time, but in some cases you could also disable it via the <code>virtualScroll</code> option
+    </div>
   </div>
 </div>
 

packages/multiple-select-vanilla/src/MultipleSelectInstance.ts

@@ -435,7 +435,7 @@ export class MultipleSelectInstance {
       offset = -1;
     }
 
-    if (rows.length > Constants.BLOCK_ROWS * Constants.CLUSTER_BLOCKS) {
+    if (this.options.virtualScroll && rows.length > Constants.BLOCK_ROWS * Constants.CLUSTER_BLOCKS) {
       this.virtualScroll?.destroy();
 
       const dropVisible = this.dropElm.style.display !== 'none';

packages/multiple-select-vanilla/src/constants.ts

@@ -55,6 +55,9 @@ const DEFAULTS: Partial<MultipleSelectOption> = {
   useSelectOptionLabel: false,
   useSelectOptionLabelToHtml: false,
 
+  infiniteScroll: false,
+  virtualScroll: true,
+
   cssStyler: () => null,
   styler: () => false,
   textTemplate: (elm: HTMLOptionElement) => elm.innerHTML.trim(),

packages/multiple-select-vanilla/src/interfaces/multipleSelectOption.interface.ts

@@ -91,7 +91,7 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
   /** Hide the option groupd checkboses. By default this is set to false. */
   hideOptgroupCheckboxes?: boolean;
 
-  /** Infinite Scroll will automatically reset the list (scroll back to top) whenever the scroll reaches the last item (end of the list) */
+  /** Defaults to False, Infinite Scroll will automatically reset the list (scroll back to top) whenever the scroll reaches the last item (end of the list) */
   infiniteScroll?: boolean;
 
   /** Whether or not Multiple Select open the select dropdown. */
@@ -178,6 +178,12 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
   /** Defaults to False, same as "useSelectOptionLabel" but will also render html */
   useSelectOptionLabelToHtml?: boolean;
 
+  /**
+   * Defaults to True, Virtual Scroll is used to improve performance with large set of data. The concept is to only render a subset
+   * of the options (~200) at a time to avoid polluting the DOM, it will also consume less memory and improve overall performance of your application.
+   */
+  virtualScroll?: boolean;
+
   /** Define the width property of the dropdown list, support a percentage setting.By default this option is set to undefined. Which is the same as the select input field. */
   width?: number | string;
 

playwright/e2e/methods01.spec.ts

@@ -44,7 +44,9 @@ test.describe('Methods 01 - getOptions()', () => {
       `"autoAdjustDropWidthByTextSize": false,`,
       `"adjustedHeightPadding": 10,`,
       `"useSelectOptionLabel": false,`,
-      `"useSelectOptionLabelToHtml": false\n}`,
+      `"useSelectOptionLabelToHtml": false,`,
+      `"infiniteScroll": false,`,
+      `"virtualScroll": true\n}`,
     ].join('\n    ');
     await expect(dialogText).toContain(strArray);
   });