fix: couple of issues related to lazy loading (#363)

Author: ghiscoding

packages/demo/src/options/options42.html

@@ -59,4 +59,12 @@ <h2 class="bd-title">
       <select id="group" class="full-width" multiple data-test="select3"></select>
     </div>
   </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-2"> Filter &amp; OK button </label>
+
+    <div class="col-sm-10">
+      <select id="group" class="full-width" multiple data-test="select4"></select>
+    </div>
+  </div>
 </div>

packages/demo/src/options/options42.ts

@@ -6,6 +6,7 @@ export default class Example {
   ms1?: MultipleSelectInstance;
   ms2?: MultipleSelectInstance;
   ms3?: MultipleSelectInstance;
+  ms4?: MultipleSelectInstance;
   serverDelay = 1000;
 
   changeServerDelay(event: Event) {
@@ -194,16 +195,85 @@ export default class Example {
         });
       },
     }) as MultipleSelectInstance;
+
+    this.ms4 = multipleSelect('select[data-test=select4]', {
+      filter: true,
+      filterPlaceholder: 'filter placeholder',
+      showOkButton: true,
+      showClear: true,
+      minHeight: 70,
+      lazyData: () => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve([
+              {
+                text: 'January',
+                value: 1,
+              },
+              {
+                text: 'February',
+                value: 2,
+                selected: true,
+              },
+              {
+                text: 'March',
+                value: 3,
+                disabled: true,
+              },
+              {
+                text: 'April',
+                value: 4,
+                selected: true,
+              },
+              {
+                text: 'May',
+                value: 5,
+              },
+              {
+                text: 'June',
+                value: 6,
+              },
+              {
+                text: 'July',
+                value: 7,
+              },
+              {
+                text: 'August',
+                value: 8,
+              },
+              {
+                text: 'September',
+                value: 9,
+              },
+              {
+                text: 'October',
+                value: 10,
+              },
+              {
+                text: 'November',
+                value: 11,
+              },
+              {
+                text: 'December',
+                value: 12,
+              },
+            ]);
+          }, this.serverDelay);
+        });
+      },
+    }) as MultipleSelectInstance;
   }
 
   unmount() {
     // destroy ms instance(s) to avoid DOM leaks
     this.ms1?.destroy();
     this.ms2?.destroy();
     this.ms3?.destroy();
+    this.ms4?.destroy();
     this.ms1 = undefined;
     this.ms2 = undefined;
     this.ms3 = undefined;
+    this.ms4 = undefined;
     this.serverDelayInput!.removeEventListener('click', this.changeServerDelay.bind(this));
     this.resetLazyBtn!.removeEventListener('click', this.createMultipleSelect.bind(this));
   }

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

@@ -173,8 +173,7 @@ export class MultipleSelectInstance {
     // label element
     this.labelElm = this.elm.closest('label');
     if (!this.labelElm && this.elm.id) {
-      this.labelElm = document.createElement('label');
-      this.labelElm.htmlFor = this.elm.id;
+      this.labelElm = createDomElement('label', { htmlFor: this.elm.id });
     }
     if (this.labelElm?.querySelector('input')) {
       this.labelElm = null;
@@ -458,13 +457,15 @@ export class MultipleSelectInstance {
       }
     }
 
-    this.ulElm = document.createElement('ul');
-    this.ulElm.role = 'combobox';
-    this.ulElm.ariaExpanded = 'false';
-    this.ulElm.ariaMultiSelectable = String(!this.options.single);
+    this.ulElm = createDomElement('ul', {
+      className: 'ms-list',
+      role: 'listbox',
+      ariaExpanded: 'false',
+      ariaMultiSelectable: String(!this.options.single),
+    });
     this.dropElm?.appendChild(this.ulElm);
 
-    if (this.options.showOkButton && !this.options.single) {
+    if (renderFilterAndSearchAll && this.options.showOkButton && !this.options.single) {
       this.okButtonElm = createDomElement(
         'button',
         { className: 'ms-ok-button', type: 'button', textContent: this.formatOkButton() },
@@ -627,12 +628,16 @@ export class MultipleSelectInstance {
         } else {
           itemOrGroupBlock = {
             tagName: 'div',
-            props: { className: `icon-checkbox-container${type === 'radio' ? ' radio' : ''}` },
+            props: {
+              className: `icon-checkbox-container${type === 'radio' ? ' radio' : ''}`,
+            },
             children: [
               inputCheckboxStruct,
               {
                 tagName: 'div',
-                props: { className: `ms-icon ${isChecked ? (type === 'radio' ? 'ms-icon-radio' : 'ms-icon-check') : 'ms-icon-uncheck'}` },
+                props: {
+                  className: `ms-icon ${isChecked ? (type === 'radio' ? 'ms-icon-radio' : 'ms-icon-check') : 'ms-icon-uncheck'}`,
+                },
               },
             ],
           };
@@ -708,7 +713,9 @@ export class MultipleSelectInstance {
 
     const iconContainerBlock: HtmlStruct = {
       tagName: 'div',
-      props: { className: `icon-checkbox-container${type === 'radio' ? ' radio' : ''}` },
+      props: {
+        className: `icon-checkbox-container${type === 'radio' ? ' radio' : ''}`,
+      },
       children: [
         inputBlock,
         {
@@ -1193,6 +1200,7 @@ export class MultipleSelectInstance {
     let isLazyProcess = false;
     if (this.options.lazyData && !this._isLazyLoaded) {
       isLazyProcess = true;
+      this.dropElm?.querySelector('ul.ms-list')?.remove();
       this.options.lazyData().then(data => {
         // when data is ready, remove spinner & update dropdown and selection
         this.options.data = data;
@@ -1223,7 +1231,7 @@ export class MultipleSelectInstance {
       if (this.selectAllElm?.parentElement) {
         this.selectAllElm.parentElement.style.display = 'none';
       }
-      if (isLazyProcess && !this._isLazyLoaded) {
+      if (isLazyProcess && !this._isLazyLoaded && !this.dropElm.querySelector('.ms-loading')) {
         const loadingElm = createDomElement('div', { className: 'ms-loading' });
         loadingElm.appendChild(createDomElement('div', { className: 'ms-icon ms-icon-loading ms-spin' }));
         loadingElm.appendChild(createDomElement('span', { textContent: this.formatLazyLoading() }));
@@ -1284,7 +1292,7 @@ export class MultipleSelectInstance {
       }
       this.ulElm ??= this.dropElm.querySelector('ul');
       if (this.ulElm) {
-        if (minHeight) {
+        if (minHeight && (!this.options.lazyData || this._isLazyLoaded)) {
           this.ulElm.style.minHeight = `${minHeight}px`;
         }
         this.ulElm.style.maxHeight = `${maxHeight}px`;
@@ -1983,19 +1991,15 @@ export class MultipleSelectInstance {
   }
 
   getScrollbarWidth() {
-    const outer = document.createElement('div');
-    outer.style.visibility = 'hidden';
-    outer.style.width = '100px';
-
+    const outer = createDomElement('div', { style: { visibility: 'hidden', width: '100px' } });
     document.body.appendChild(outer);
 
     const widthNoScroll = outer.offsetWidth;
     // force scrollbars
     outer.style.overflow = 'scroll';
 
     // add innerdiv
-    const inner = document.createElement('div');
-    inner.style.width = '100%';
+    const inner = createDomElement('div', { style: { width: '100%' } });
     outer.appendChild(inner);
 
     const widthWithScroll = inner.offsetWidth;

packages/multiple-select-vanilla/src/styles/_variables.scss

@@ -76,7 +76,7 @@ $ms-label-min-height: 1.25rem !default;
 $ms-label-padding: 0 0 0 2px !default;
 $ms-label-text-padding-left: 8px !default;
 $ms-loading-gap: 4px !default;
-$ms-loading-icon-size: 1.25em !default;
+$ms-loading-icon-size: 1.15em !default;
 $ms-loading-padding: 0.6rem 8px !default;
 $ms-loading-spin-animation: 2s infinite linear !default;
 $ms-option-highlight-bg-color: rgba($ms-primary-color, 8%) !default;

packages/multiple-select-vanilla/src/styles/multiple-select.scss

@@ -402,6 +402,8 @@
     padding: var(--ms-loading-padding, v.$ms-loading-padding);
     .ms-icon-loading {
       font-size: var(--ms-loading-icon-size, v.$ms-loading-icon-size);
+      height: var(--ms-loading-icon-size, v.$ms-loading-icon-size);
+      width: var(--ms-loading-icon-size, v.$ms-loading-icon-size);
     }   
   }
 

playwright/e2e/options42.spec.ts

@@ -71,7 +71,7 @@ test.describe('Options 42 - Lazy Load Data', () => {
     await page.locator('div[data-test=select2].ms-parent').click();
     await page.locator('div[data-test=select2].ms-parent').click();
 
-    // 3th select
+    // 3rd select
     await expect(await page.locator('div[data-test=select3] .ms-choice')).toHaveText('');
     await page.locator('div[data-test=select3].ms-parent').click();
     let loading3Loc = await page.locator('.ms-loading');
@@ -101,5 +101,47 @@ test.describe('Options 42 - Lazy Load Data', () => {
     await expect(loading1Loc).not.toBeVisible();
     await page.locator('div[data-test=select2].ms-parent').click();
     await page.locator('div[data-test=select2].ms-parent').click();
+
+    // --
+    // 2nd select
+    await expect(await page.locator('div[data-test=select4] .ms-choice')).toHaveText('');
+    await page.locator('div[data-test=select4].ms-parent').click();
+    let loading4Loc = await page.locator('.ms-loading');
+    await expect(loading4Loc).toBeVisible();
+    await expect(loading4Loc).toContainText('Loading...');
+    await page.waitForTimeout(200);
+    loading4Loc = await page.locator('.ms-loading');
+    await expect(loading4Loc).not.toBeVisible();
+
+    await expect(await page.locator('div[data-test=select4] .ms-choice')).toHaveText('February, April');
+    let select4LiElms = await page.locator('div[data-test=select4] li[role="option"]');
+    await expect(select4LiElms).toHaveCount(12);
+    const select4li1 = await page.locator('div[data-test=select4] .ms-drop li:visible').nth(0);
+    await expect(await select4li1.locator('label')).toHaveText('January');
+    const select4li2 = await page.locator('div[data-test=select4] .ms-drop li:visible').nth(1);
+    await expect(await select4li2.locator('label')).toHaveText('February');
+    const select4li3 = await page.locator('div[data-test=select4] .ms-drop li:visible').nth(2);
+    await expect(await select4li3.locator('label')).toHaveText('March');
+    await page.locator('div[data-test=select4].ms-parent').click();
+    await expect(await page.locator('div[data-test=select4] .ms-drop .ms-ok-button')).toHaveText('OK');
+
+    // 4nd select, open/close multiple times should now be instant without any lazy reloading
+    await page.locator('div[data-test=select4].ms-parent').click();
+    loading1Loc = await page.locator('.ms-loading');
+    await expect(loading1Loc).not.toBeVisible();
+    select4LiElms = await page.locator('div[data-test=select4] li[role="option"]');
+    await expect(select4LiElms).toHaveCount(12);
+    await page.locator('div[data-test=select4].ms-parent').click();
+    loading1Loc = await page.locator('.ms-loading');
+    await expect(loading1Loc).not.toBeVisible();
+    await page.locator('div[data-test=select4].ms-parent').click();
+
+    const placeholderLocator = await page.getByPlaceholder('filter placeholder');
+    expect(placeholderLocator).toHaveCount(1);
+    placeholderLocator.focus();
+    await page.keyboard.type('april');
+    select4LiElms = await page.locator('div[data-test=select4] li[role="option"]');
+    await expect(select4LiElms).toHaveCount(1);
+    await page.locator('div[data-test=select4].ms-parent').click();
   });
 });