@aquera/nile-elements 2.0.18 → 2.0.20

package/src/nile-select/virtual-scroll-helper.ts

@@ -1,4 +1,5 @@
-import { html } from 'lit';
+import { html, noChange, nothing } from 'lit';
+import { guard } from 'lit/directives/guard.js';
 import type NileElement from '../internal/nile-element';
 
 /**
@@ -13,12 +14,14 @@ export class VirtualScrollHelper {
 
   renderVirtualizedContent(): any {
     const component = this.component as any;
+    const tooltipPath = !!component.showTooltip;
 
     return html`
       <div class="virtual-select">
         <nile-virtual-select
           .name=${component.name}
           .value=${component.value}
+          .maxOptionsVisible=${tooltipPath || !component.maxOptionsVisibleExplicit ? noChange : component.maxOptionsVisible}
           .autoResize=${component.autoResize}
           .showTooltip=${component.showTooltip}
           .chipMinWidth=${component.chipMinWidth}
@@ -51,7 +54,7 @@ export class VirtualScrollHelper {
           .blockValueChange=${component.blockValueChange}
           .noWidthSync=${component.noWidthSync}
           .enableTabClose=${component.enableTabClose}
-          .data=${component.data}
+          .data=${tooltipPath ? guard([component.data], () => component.data) : component.data}
           .open=${component.open}
           .loading=${component.loading}
           .portal=${component.portal}
@@ -60,8 +63,8 @@ export class VirtualScrollHelper {
           .enableDescription=${component.enableDescription}
           .tickOnSelect=${component.tickOnSelect}
           .legacy=${component.legacy}
-          @nile-input=${(e: CustomEvent) => component.syncValueFromVirtualSelect(e)}
-          @nile-change=${(e: CustomEvent) => component.syncValueFromVirtualSelect(e)}
+          @nile-input=${tooltipPath ? (e: CustomEvent) => component.syncValueFromVirtualSelect(e) : nothing}
+          @nile-change=${tooltipPath ? (e: CustomEvent) => component.syncValueFromVirtualSelect(e) : nothing}
           exportparts="
             select-options,
             select-no-results,

package/src/nile-virtual-select/nile-virtual-select.test.ts

@@ -1,4 +1,4 @@
-import { aTimeout, expect, fixture, html, nextFrame, waitUntil } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, nextFrame, oneEvent, waitUntil } from '@open-wc/testing';
 import './nile-virtual-select';
 import '../nile-input/nile-input';
 import type { NileVirtualSelect } from './nile-virtual-select';
@@ -843,3 +843,141 @@ describe('NileVirtualSelect showtooltip tooltip on sub-pixel truncation', () =>
     }
   });
 });
+
+
+describe('NileVirtualSelect external value while Selected is open', () => {
+  const OPTIONS = Array.from({ length: 200 }, (_, i) => ({ value: `option-${i + 1}`, label: `Option ${i + 1}` }));
+  let mounted: any;
+
+  // Let the dropdown finish hiding before the fixture is torn down, so the virtualizer is not still laying out
+  // a list that has already been detached.
+  afterEach(async () => {
+    if (mounted?.open) {
+      const hidden = oneEvent(mounted, 'nile-after-hide');
+      mounted.open = false;
+      await Promise.race([hidden, aTimeout(1500)]);
+      await nextFrame();
+      await nextFrame();
+    }
+    mounted = undefined;
+  });
+
+  // Known, pre-existing noise from @lit-labs/virtualizer (a "ResizeObserver loop" notice, and a detached-list error
+  // when the visible list swaps between a short and a long data set). The browser raises them as window errors,
+  // which would fail whichever test is running; the assertions below still decide pass or fail. The detached-list
+  // errors are matched on message AND a `virtualizer` frame in the stack, so the same message from anywhere else
+  // still fails the test. "ResizeObserver loop" is a browser notice with no stack.
+  const virtualizerErrors = ['ChildPart` has no `parentNode`', "reading 'insertBefore'"];
+  let previousOnError: OnErrorEventHandler;
+  before(() => {
+    previousOnError = window.onerror;
+    window.onerror = (message, source, lineno, colno, error) => {
+      if (typeof message === 'string') {
+        if (message.includes('ResizeObserver loop')) return true;
+        if (virtualizerErrors.some(known => message.includes(known)) && error?.stack?.toLowerCase().includes('virtualizer')) {
+          return true;
+        }
+      }
+      return previousOnError ? previousOnError.call(window, message, source, lineno, colno, error) : false;
+    };
+  });
+  after(() => {
+    window.onerror = previousOnError;
+  });
+
+  async function mount(showTooltip: boolean, value: string[] = ['option-1', 'option-2']) {
+    const el = await fixture<NileVirtualSelect>(html`<nile-virtual-select
+      multiple
+      ?showTooltip=${showTooltip}
+      .data=${OPTIONS}
+      .value=${value}
+    ></nile-virtual-select>`);
+    await el.updateComplete;
+    const shown = oneEvent(el, 'nile-after-show');
+    (el.shadowRoot!.querySelector('[part="combobox"]') as HTMLElement).dispatchEvent(
+      new MouseEvent('mousedown', { bubbles: true, composed: true, button: 0 })
+    );
+    await shown;
+    await aTimeout(50);
+    mounted = el;
+    return el as any;
+  }
+
+  async function toggleSelected(el: any) {
+    (el.shadowRoot.querySelector('.select__footer nile-checkbox') as HTMLElement).click();
+    await el.updateComplete;
+    await aTimeout(30);
+  }
+
+  // The standalone select has no sized container here, so its options are not laid out; drive the same
+  // selection handler the option click uses.
+  async function pick(el: any, value: string) {
+    el.handleOptionSelection({ value });
+    await el.updateComplete;
+    await aTimeout(30);
+  }
+
+  const values = (el: any) => el.data.map((item: any) => item.value);
+
+  it('E1. showtooltip: an external value replace recomputes the Selected list', async () => {
+    const el = await mount(true);
+    await toggleSelected(el);
+    expect(values(el)).to.deep.equal(['option-1', 'option-2']);
+
+    el.value = ['option-5'];
+    await el.updateComplete;
+    await aTimeout(30);
+
+    expect(el.showSelected).to.be.true;
+    expect(values(el)).to.deep.equal(['option-5']);
+  });
+
+  it('E2. showtooltip: an external value that adds or removes items follows the Selected list', async () => {
+    const el = await mount(true);
+    await toggleSelected(el);
+
+    el.value = ['option-1', 'option-2', 'option-7'];
+    await el.updateComplete;
+    await aTimeout(30);
+    expect(values(el)).to.deep.equal(['option-1', 'option-2', 'option-7']);
+
+    el.value = ['option-2'];
+    await el.updateComplete;
+    await aTimeout(30);
+    expect(values(el)).to.deep.equal(['option-2']);
+  });
+
+  it('E3. showtooltip: an external empty value leaves the Selected view', async () => {
+    const el = await mount(true);
+    await toggleSelected(el);
+
+    el.value = [];
+    await el.updateComplete;
+    await aTimeout(30);
+
+    expect(el.showSelected).to.be.false;
+    expect(el.data.length).to.equal(200);
+  });
+
+  it('E4. showtooltip: a normal uncheck in the Selected view is not treated as external', async () => {
+    const el = await mount(true);
+    await toggleSelected(el);
+
+    await pick(el, 'option-2');
+
+    expect(el.value).to.deep.equal(['option-1']);
+    expect(values(el)).to.deep.equal(['option-1', 'option-2']);
+  });
+
+  it('E5. without showtooltip an external value leaves the Selected list as it was (pre-2.0.9)', async () => {
+    const el = await mount(false);
+    await toggleSelected(el);
+
+    el.value = ['option-5'];
+    await el.updateComplete;
+    await aTimeout(30);
+
+    expect(el.showSelected).to.be.true;
+    expect(values(el)).to.deep.equal(['option-1', 'option-2']);
+  });
+});

package/src/nile-virtual-select/nile-virtual-select.ts

@@ -135,9 +135,10 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   /** The name of the select, submitted as a name/value pair with form data. */
   @property() name = '';
 
-  /** Array of all option items for virtual scrolling */
   @property({ type: Array }) data: any = [];
 
+  private lastSeenValue: string | string[] | undefined;
+
   /** Original unfiltered option items for search functionality */
   @state() private originalOptionItems: any = [];
 
@@ -658,6 +659,15 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
     event.preventDefault();
   }
 
+  /** Narrows `data` to the items that are currently selected (the "Selected" view). */
+  private applySelectedFilter(): void {
+    const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
+    this.data = this.originalOptionItems.filter((item: any) => {
+      const itemValue = this.getItemValue(item);
+      return selectedValues.some(val => String(val) === String(itemValue));
+    });
+  }
+
   private toggleShowSelected(event: Event): void {
     event.stopPropagation();
     event.preventDefault();
@@ -668,11 +678,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
     if (this.showSelected) {
       this.searchValue = "";
-      const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
-      this.data = this.originalOptionItems.filter((item: any) => {
-        const itemValue = this.getItemValue(item);
-        return selectedValues.some(val => String(val) === String(itemValue));
-      });
+      this.applySelectedFilter();
     } else {
       this.data = [...this.originalOptionItems];
     }
@@ -859,6 +865,7 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
   }
 
   private selectionChanged(): void {
+    this.lastSeenValue = this.value;
     const itemsToSearch = this.originalOptionItems.length > 0 ? this.originalOptionItems : this.data;
     this.selectedOptions = VirtualSelectSelectionManager.createVirtualOptionsFromValues(
       this.value,
@@ -1018,7 +1025,11 @@ export class NileVirtualSelect extends NileElement implements NileFormControl {
 
   @watch('value', { waitUntilFirstUpdate: true })
   handleValueChange(): void {
+    const externalValueChange = this.value !== this.lastSeenValue;
     this.selectionChanged();
+    if (externalValueChange && this.showTooltip && this.showSelected) {
+      this.applySelectedFilter();
+    }
     this.requestUpdate();
 
     // Update body append content if it's active