@aquera/nile-elements 2.0.18 → 2.0.19

package/src/nile-select/nile-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-select';
 import '../nile-option/nile-option';
 import '../nile-input/nile-input';
@@ -661,7 +661,7 @@ describe('NileSelect chip fitting behaviour matrix', () => {
   });
 });
 
-describe('NileSelect enableVirtualScroll value sync', () => {
+describe('NileSelect enableVirtualScroll value sync (showTooltip)', () => {
   const ROLES = ['Administrators', 'Users', 'Guests', 'Print Operators'];
   const DATA = ROLES.map(role => ({ label: role, value: role }));
 
@@ -675,6 +675,7 @@ describe('NileSelect enableVirtualScroll value sync', () => {
   async function virtualSelect(tpl = html`<nile-select
       multiple
       .enableVirtualScroll=${true}
+      .showTooltip=${true}
       .data=${DATA}
       .value=${[]}
     ></nile-select>`) {
@@ -717,6 +718,7 @@ describe('NileSelect enableVirtualScroll value sync', () => {
     const { el, inner } = await virtualSelect(html`<nile-select
       multiple
       .enableVirtualScroll=${true}
+      .showTooltip=${true}
       .data=${DATA}
       .value=${['Administrators', 'Users', 'Guests']}
     ></nile-select>`);
@@ -747,6 +749,7 @@ describe('NileSelect enableVirtualScroll value sync', () => {
   it('V5. single-select virtual mode keeps the wrapper value in sync', async () => {
     const { el, inner } = await virtualSelect(html`<nile-select
       .enableVirtualScroll=${true}
+      .showTooltip=${true}
       .data=${DATA}
     ></nile-select>`);
 
@@ -761,7 +764,8 @@ describe('NileSelect enableVirtualScroll value sync', () => {
 
   it('V6. resizing the host does not re-render the wrapper without autoResize', async () => {
     const host = await fixture<HTMLElement>(html`<div style="width: 400px">
-      <nile-select multiple .enableVirtualScroll=${true} .data=${DATA}></nile-select>
+      <nile-select multiple .enableVirtualScroll=${true}
+      .showTooltip=${true} .data=${DATA}></nile-select>
     </div>`);
     const el = host.querySelector('nile-select') as NileSelect;
     await el.updateComplete;
@@ -784,7 +788,7 @@ describe('NileSelect enableVirtualScroll value sync', () => {
   });
 });
 
-describe('NileSelect enableVirtualScroll + searchEnabled value sync', () => {
+describe('NileSelect enableVirtualScroll + searchEnabled value sync (showTooltip)', () => {
   const ROLES = ['Administrators', 'Users', 'Guests', 'Print Operators'];
   const DATA = ROLES.map(role => ({ label: role, value: role }));
 
@@ -809,6 +813,7 @@ describe('NileSelect enableVirtualScroll + searchEnabled value sync', () => {
       ?multiple=${multiple}
       .searchEnabled=${true}
       .enableVirtualScroll=${true}
+      .showTooltip=${true}
       .portal=${portal}
       .data=${DATA}
       .value=${value}
@@ -1594,7 +1599,7 @@ describe('NileSelect 2.0.8 compatibility matrix', () => {
     expect(inner.shadowRoot.querySelectorAll('.select__tags nile-tag').length).to.equal(1);
   });
 
-  it('C9. enableVirtualScroll: programmatic value and clear-all reach both selects', async () => {
+  it('C9. enableVirtualScroll: programmatic value reaches the inner select; clear-all leaves the outer value alone (pre-2.0.9)', async () => {
     const el = await fixture<NileSelect>(html`<nile-select multiple .enableVirtualScroll=${true} .data=${DATA}></nile-select>`);
     await settle(el);
     const inner = el.shadowRoot!.querySelector('nile-virtual-select') as any;
@@ -1604,6 +1609,24 @@ describe('NileSelect 2.0.8 compatibility matrix', () => {
     await inner.updateComplete;
     expect(inner.value).to.deep.equal(['a', 'c']);
 
+    inner.unSelectAll();
+    await inner.updateComplete;
+    await settle(el);
+    expect(inner.value).to.deep.equal([]);
+    // Without showTooltip the inner select owns the selection; the outer value is not written back.
+    expect(el.value).to.deep.equal(['a', 'c']);
+  });
+
+  it('C9b. enableVirtualScroll + showTooltip: programmatic value and clear-all reach both selects', async () => {
+    const el = await fixture<NileSelect>(html`<nile-select multiple showTooltip .enableVirtualScroll=${true} .data=${DATA}></nile-select>`);
+    await settle(el);
+    const inner = el.shadowRoot!.querySelector('nile-virtual-select') as any;
+
+    el.value = ['a', 'c'];
+    await settle(el);
+    await inner.updateComplete;
+    expect(inner.value).to.deep.equal(['a', 'c']);
+
     inner.unSelectAll();
     await inner.updateComplete;
     await settle(el);
@@ -1676,3 +1699,535 @@ describe('NileSelect showtooltip tooltip on sub-pixel truncation', () => {
     }
   });
 });
+
+
+/**
+ * enableVirtualScroll: the two value/data paths.
+ *
+ * - without `showTooltip` the wrapper behaves as it did before 2.0.9: the inner select owns the
+ *   selection, the wrapper `value` is not written back, and `.data` is re-applied as before;
+ * - with `showTooltip` the inner value is synced up, `.data` is only re-applied when its reference
+ *   changes, and an external `value` change recomputes an open "Selected" view.
+ *
+ * These tests drive the rendered DOM (option mouseup, footer checkbox, search input, chip remove button)
+ * rather than the inner select's methods.
+ */
+type VsInner = HTMLElement & {
+  value: string | string[];
+  data: Array<{ value: string; label: string }>;
+  showSelected: boolean;
+  searchValue: string;
+  maxOptionsVisible: number;
+  updateComplete: Promise<boolean>;
+};
+
+const vsMounted: VsInner[] = [];
+
+const VS_OPTIONS = Array.from({ length: 300 }, (_, i) => ({ value: `option-${i + 1}`, label: `Option ${i + 1}` }));
+
+function vsRoots(inner: VsInner): ParentNode[] {
+  const portal = document.body.querySelector('.nile-virtual-select-portal-append');
+  return [inner.shadowRoot!, ...(portal ? [portal] : [])];
+}
+
+function vsAll(inner: VsInner, selector: string): HTMLElement[] {
+  return vsRoots(inner).flatMap(root => Array.from(root.querySelectorAll<HTMLElement>(selector)));
+}
+
+async function vsMount({
+  showTooltip = false,
+  multiple = true,
+  search = false,
+  portal = false,
+  value = undefined as string | string[] | undefined,
+  data = VS_OPTIONS,
+} = {}) {
+  const initial = value ?? (multiple ? [] : '');
+  const el = await fixture<NileSelect>(html`<nile-select
+    ?multiple=${multiple}
+    ?searchEnabled=${search}
+    ?showTooltip=${showTooltip}
+    .enableVirtualScroll=${true}
+    .portal=${portal}
+    .data=${data}
+    .value=${initial}
+  ></nile-select>`);
+  await el.updateComplete;
+  const inner = el.shadowRoot!.querySelector('nile-virtual-select') as unknown as VsInner;
+  await inner.updateComplete;
+  vsMounted.push(inner);
+  let updates = 0;
+  const update = (el as any).update;
+  (el as any).update = function (this: NileSelect, changed: Map<string, unknown>) {
+    updates++;
+    return update.call(this, changed);
+  };
+  return { el, inner, updates: () => updates, resetUpdates: () => (updates = 0) };
+}
+
+async function vsSettle(el: NileSelect, inner: VsInner) {
+  await inner.updateComplete;
+  await el.updateComplete;
+  await inner.updateComplete;
+  await aTimeout(30);
+}
+
+async function vsOpen(inner: VsInner) {
+  const shown = oneEvent(inner, 'nile-after-show');
+  (inner.shadowRoot!.querySelector('[part="combobox"]') as HTMLElement).dispatchEvent(
+    new MouseEvent('mousedown', { bubbles: true, composed: true, button: 0 })
+  );
+  await shown;
+  await aTimeout(50);
+}
+
+async function vsPick(el: NileSelect, inner: VsInner, value: string) {
+  await waitUntil(
+    () => vsAll(inner, 'nile-option').find(o => (o as any).value === value),
+    `option ${value} was not rendered`
+  );
+  const option = vsAll(inner, 'nile-option').find(o => (o as any).value === value)!;
+  option.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, composed: true, button: 0 }));
+  await vsSettle(el, inner);
+}
+
+async function vsToggleSelected(el: NileSelect, inner: VsInner) {
+  (vsAll(inner, '.select__footer nile-checkbox')[0] as HTMLElement).click();
+  await vsSettle(el, inner);
+}
+
+async function vsType(el: NileSelect, inner: VsInner, text: string) {
+  const input = vsAll(inner, '.select__search nile-input')[0].shadowRoot!.querySelector('input') as HTMLInputElement;
+  input.value = text;
+  input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+  await vsSettle(el, inner);
+}
+
+async function vsRemoveChip(el: NileSelect, inner: VsInner, index = 0) {
+  const tag = inner.shadowRoot!.querySelectorAll('nile-tag')[index] as HTMLElement;
+  const remove = tag.shadowRoot!.querySelector('[part="remove-button"], nile-icon-button, button') as HTMLElement;
+  ((remove.shadowRoot?.querySelector('button') as HTMLElement | null) ?? remove).click();
+  await vsSettle(el, inner);
+}
+
+const VS_SEARCH = 'Option 99';
+const VS_SEARCH_HITS = VS_OPTIONS.filter(o => o.label.includes(VS_SEARCH)).length;
+const vsDataValues = (inner: VsInner) => inner.data.map(item => item.value);
+
+// Known, pre-existing noise from @lit-labs/virtualizer, unrelated to these tests: a "ResizeObserver loop" notice
+// while a list is laid out, and a detached-list error when the visible list swaps between a short and a long data
+// set (for example leaving the Selected view). The browser raises them as window errors, which would fail
+// whichever test happens to be running. Only the new virtual-scroll describes below install this filter; their
+// assertions still decide pass or fail.
+// The virtualizer-only errors are matched on message AND on a `virtualizer` frame in the stack, so the same message
+// thrown from anywhere else still fails the test. "ResizeObserver loop" is a browser notice with no stack.
+const VS_VIRTUALIZER_ERRORS = ['ChildPart` has no `parentNode`', "reading 'insertBefore'"];
+
+function vsIsKnownVirtualizerNoise(message: unknown, error?: Error | null): boolean {
+  if (typeof message !== 'string') return false;
+  if (message.includes('ResizeObserver loop')) return true;
+  return (
+    VS_VIRTUALIZER_ERRORS.some(known => message.includes(known)) &&
+    !!error?.stack &&
+    error.stack.toLowerCase().includes('virtualizer')
+  );
+}
+
+function vsIgnoreKnownVirtualizerErrors(): () => void {
+  const previous = window.onerror;
+  window.onerror = (message, source, lineno, colno, error) => {
+    if (vsIsKnownVirtualizerNoise(message, error)) return true;
+    return previous ? previous.call(window, message, source, lineno, colno, error) : false;
+  };
+  return () => {
+    window.onerror = previous;
+  };
+}
+
+// Close every dropdown and let it finish hiding before its fixture goes away, so the virtualizer is not
+// still laying out a list that has already been detached. Registered per describe below, not file-wide.
+async function vsCloseDropdowns() {
+  const mounted = vsMounted.splice(0);
+  for (const inner of mounted) {
+    if (!(inner as any).open) continue;
+    const hidden = oneEvent(inner, 'nile-after-hide');
+    (inner as any).open = false;
+    await Promise.race([hidden, aTimeout(1500)]);
+  }
+  if (mounted.length) {
+    await nextFrame();
+    await nextFrame();
+    await aTimeout(250);
+  }
+  document.body.querySelectorAll('.nile-virtual-select-portal-append').forEach(n => n.remove());
+}
+
+describe('NileSelect enableVirtualScroll without showTooltip keeps the pre-2.0.9 behaviour', () => {
+  let restoreOnError: () => void;
+  before(() => {
+    restoreOnError = vsIgnoreKnownVirtualizerErrors();
+  });
+  after(() => {
+    restoreOnError();
+  });
+  afterEach(vsCloseDropdowns);
+
+  it('L1. a pick does not write the outer value', async () => {
+    const { el, inner } = await vsMount();
+    await vsOpen(inner);
+    await vsPick(el, inner, 'option-1');
+
+    expect(inner.value).to.deep.equal(['option-1']);
+    expect(el.value).to.deep.equal([]);
+  });
+
+  it('L2. a normal pick, uncheck and chip removal cause no outer update', async () => {
+    const { el, inner, updates, resetUpdates } = await vsMount({ value: ['option-9'] });
+    await vsOpen(inner);
+    resetUpdates();
+
+    await vsPick(el, inner, 'option-1');
+    await vsPick(el, inner, 'option-1');
+    await vsRemoveChip(el, inner, 0);
+
+    expect(updates()).to.equal(0);
+  });
+
+  it('L3. a parent re-render pushes the stale outer value back over the selection', async () => {
+    const { el, inner } = await vsMount();
+    await vsOpen(inner);
+    await vsPick(el, inner, 'option-1');
+    expect(inner.value).to.deep.equal(['option-1']);
+
+    el.requestUpdate();
+    await vsSettle(el, inner);
+
+    expect(inner.value).to.deep.equal([]);
+  });
+
+  it('L4. nile-input / nile-change from the inner select are not synced (no sync listeners)', async () => {
+    const { el, inner } = await vsMount({ value: ['option-1'] });
+    const fire = (name: string, value: unknown) =>
+      inner.dispatchEvent(new CustomEvent(name, { detail: { value }, bubbles: true, composed: true }));
+
+    fire('nile-input', ['option-2']);
+    fire('nile-change', ['option-3']);
+    await vsSettle(el, inner);
+
+    expect(el.value).to.deep.equal(['option-1']);
+  });
+
+  it('L5. a direct syncValueFromVirtualSelect call does not change the outer value', async () => {
+    const { el, inner } = await vsMount({ value: ['option-1'] });
+    const event = new CustomEvent('nile-change', { detail: { value: ['option-2'] } });
+    Object.defineProperty(event, 'currentTarget', { value: inner });
+    Object.defineProperty(event, 'composedPath', { value: () => [inner] });
+
+    el.syncValueFromVirtualSelect(event as any);
+    await vsSettle(el, inner);
+
+    expect(el.value).to.deep.equal(['option-1']);
+  });
+
+  it('L6. Selected stays filtered through a normal uncheck', async () => {
+    const { el, inner } = await vsMount();
+    await vsOpen(inner);
+    await vsPick(el, inner, 'option-1');
+    await vsPick(el, inner, 'option-2');
+    await vsPick(el, inner, 'option-3');
+    await vsToggleSelected(el, inner);
+    expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2', 'option-3']);
+
+    await vsPick(el, inner, 'option-2');
+
+    expect(inner.showSelected).to.be.true;
+    expect(inner.value).to.deep.equal(['option-1', 'option-3']);
+    expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2', 'option-3']);
+  });
+
+  it('L7. search stays filtered through a pick and an unpick', async () => {
+    const { el, inner } = await vsMount({ search: true });
+    await vsOpen(inner);
+    await vsType(el, inner, VS_SEARCH);
+    expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+
+    await vsPick(el, inner, 'option-99');
+    expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+    expect(inner.searchValue).to.equal(VS_SEARCH);
+
+    await vsPick(el, inner, 'option-99');
+    expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+    expect(inner.value).to.deep.equal([]);
+  });
+
+  it('L9. the wrapper pushes maxOptionsVisible to the inner select (pre-2.0.9 binding)', async () => {
+    const { el, inner } = await vsMount({ value: ['option-1'] });
+    const writes: number[] = [];
+    const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(inner), 'maxOptionsVisible')!;
+    Object.defineProperty(inner, 'maxOptionsVisible', {
+      configurable: true,
+      get() {
+        return descriptor.get!.call(this);
+      },
+      set(value: number) {
+        writes.push(value);
+        descriptor.set!.call(this, value);
+      },
+    });
+
+    el.maxOptionsVisible = 5;
+    await vsSettle(el, inner);
+
+    expect(writes).to.include(5);
+  });
+
+  it('L10. the untouched default maxOptionsVisible is not pushed, so the inner select is not pinned as explicit', async () => {
+    const { inner } = await vsMount();
+
+    expect((inner as any).maxOptionsVisibleExplicit).to.be.false;
+  });
+
+  it('L8. data is re-applied on every wrapper render (plain binding, pre-2.0.9)', async () => {
+    const { el, inner } = await vsMount({ value: ['option-1'] });
+    await vsOpen(inner);
+    // After opening, the inner select holds its own copy of the list.
+    expect(inner.data).to.not.equal(el.data);
+
+    el.requestUpdate();
+    await vsSettle(el, inner);
+
+    expect(inner.data).to.equal(el.data);
+  });
+});
+
+describe('NileSelect enableVirtualScroll with showTooltip: guarded data and external value updates', () => {
+  let restoreOnError: () => void;
+  before(() => {
+    restoreOnError = vsIgnoreKnownVirtualizerErrors();
+  });
+  after(() => {
+    restoreOnError();
+  });
+  afterEach(vsCloseDropdowns);
+
+  it('T1. Selected + uncheck stays filtered', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true });
+    await vsOpen(inner);
+    await vsPick(el, inner, 'option-1');
+    await vsPick(el, inner, 'option-2');
+    await vsPick(el, inner, 'option-3');
+    await vsToggleSelected(el, inner);
+    expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2', 'option-3']);
+
+    await vsPick(el, inner, 'option-2');
+
+    expect(inner.showSelected).to.be.true;
+    expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2', 'option-3']);
+    expect(el.value).to.deep.equal(['option-1', 'option-3']);
+  });
+
+  it('T2. search + pick/unpick stays filtered', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true, search: true });
+    await vsOpen(inner);
+    await vsType(el, inner, VS_SEARCH);
+    expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+
+    await vsPick(el, inner, 'option-99');
+    expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+    expect(inner.searchValue).to.equal(VS_SEARCH);
+    expect(el.value).to.deep.equal(['option-99']);
+
+    await vsPick(el, inner, 'option-99');
+    expect(inner.data.length).to.equal(VS_SEARCH_HITS);
+    expect(el.value).to.deep.equal([]);
+  });
+
+  it('T3. chip removal while Selected stays filtered', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2', 'option-3'] });
+    await vsOpen(inner);
+    await vsToggleSelected(el, inner);
+    expect(inner.data.length).to.equal(3);
+
+    await vsRemoveChip(el, inner, 0);
+
+    expect(inner.showSelected).to.be.true;
+    expect(inner.data.length).to.equal(3);
+    expect(el.value).to.deep.equal(['option-2', 'option-3']);
+  });
+
+  it('T4. portal: Selected + uncheck stays filtered', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true, portal: true });
+    await vsOpen(inner);
+    await waitUntil(() => document.body.querySelector('.nile-virtual-select-portal-append #listbox'), 'listbox never portalled');
+    await vsPick(el, inner, 'option-1');
+    await vsPick(el, inner, 'option-2');
+    await vsToggleSelected(el, inner);
+    expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2']);
+
+    await vsPick(el, inner, 'option-2');
+
+    expect(inner.showSelected).to.be.true;
+    expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2']);
+    expect(el.value).to.deep.equal(['option-1']);
+  });
+
+  it('T5. picking, removing a chip and clearing sync the outer value; nile-change listeners see it', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true });
+    const seen: unknown[] = [];
+    el.addEventListener('nile-change', () => seen.push(el.value));
+    await vsOpen(inner);
+
+    await vsPick(el, inner, 'option-1');
+    await vsPick(el, inner, 'option-2');
+    expect(el.value).to.deep.equal(['option-1', 'option-2']);
+    expect(seen[0]).to.deep.equal(['option-1']);
+
+    await vsRemoveChip(el, inner, 0);
+    expect(el.value).to.deep.equal(['option-2']);
+
+    (vsAll(inner, '.select__clear')[0] as HTMLElement).click();
+    await vsSettle(el, inner);
+    expect(el.value).to.deep.equal([]);
+  });
+
+  it('T6. an external value replace while Selected recomputes the list', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+    await vsOpen(inner);
+    await vsToggleSelected(el, inner);
+
+    el.value = ['option-5'];
+    await vsSettle(el, inner);
+
+    expect(inner.showSelected).to.be.true;
+    expect(vsDataValues(inner)).to.deep.equal(['option-5']);
+  });
+
+  it('T7. an external value that adds an item while Selected shows the new item', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+    await vsOpen(inner);
+    await vsToggleSelected(el, inner);
+
+    el.value = ['option-1', 'option-2', 'option-7'];
+    await vsSettle(el, inner);
+
+    expect(vsDataValues(inner)).to.deep.equal(['option-1', 'option-2', 'option-7']);
+  });
+
+  it('T8. an external value that removes an item while Selected drops it from the list', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+    await vsOpen(inner);
+    await vsToggleSelected(el, inner);
+
+    el.value = ['option-1'];
+    await vsSettle(el, inner);
+
+    expect(vsDataValues(inner)).to.deep.equal(['option-1']);
+  });
+
+  it('T9. an external empty value leaves the Selected view', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+    await vsOpen(inner);
+    await vsToggleSelected(el, inner);
+
+    el.value = [];
+    await vsSettle(el, inner);
+
+    expect(inner.showSelected).to.be.false;
+    expect(inner.data.length).to.equal(VS_OPTIONS.length);
+  });
+
+  it('T10. a normal pick after an external value update still keeps the item listed', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+    await vsOpen(inner);
+    await vsToggleSelected(el, inner);
+    el.value = ['option-5', 'option-6'];
+    await vsSettle(el, inner);
+
+    await vsPick(el, inner, 'option-5');
+
+    expect(inner.value).to.deep.equal(['option-6']);
+    expect(el.value).to.deep.equal(['option-6']);
+    expect(inner.showSelected).to.be.true;
+    expect(vsDataValues(inner)).to.deep.equal(['option-5', 'option-6']);
+  });
+
+  it('T11. a normal pick does not re-send the data array', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true, value: ['option-1', 'option-2'] });
+    await vsOpen(inner);
+    await vsToggleSelected(el, inner);
+    const before = inner.data;
+
+    await vsPick(el, inner, 'option-2');
+
+    expect(inner.data).to.equal(before);
+  });
+
+  it('T12. turning showTooltip on at runtime keeps the selection', async () => {
+    const { el, inner } = await vsMount({ showTooltip: false });
+    await vsOpen(inner);
+    await vsPick(el, inner, 'option-1');
+    await vsPick(el, inner, 'option-2');
+    expect(el.value).to.deep.equal([]);
+    expect(inner.value).to.deep.equal(['option-1', 'option-2']);
+
+    el.showTooltip = true;
+    await vsSettle(el, inner);
+
+    expect(el.value).to.deep.equal(['option-1', 'option-2']);
+    expect(inner.value).to.deep.equal(['option-1', 'option-2']);
+  });
+
+  it('T15. turning showTooltip on at runtime engages the fitted chip row', async () => {
+    const { el, inner } = await vsMount({
+      showTooltip: false,
+      value: ['option-1', 'option-2', 'option-3', 'option-4', 'option-5'],
+    });
+    const fitted = () => !!inner.shadowRoot!.querySelector('.select__tags--fitted');
+    expect(fitted()).to.be.false;
+
+    el.showTooltip = true;
+    await vsSettle(el, inner);
+
+    await waitUntil(fitted, 'the fitted chip row never engaged');
+    expect(el.value).to.deep.equal(['option-1', 'option-2', 'option-3', 'option-4', 'option-5']);
+  });
+
+  it('T16. changing showTooltip and value in the same update keeps the consumer value', async () => {
+    const { el, inner } = await vsMount({ showTooltip: false });
+    await vsOpen(inner);
+    await vsPick(el, inner, 'option-1');
+    expect(inner.value).to.deep.equal(['option-1']);
+    expect(el.value).to.deep.equal([]);
+
+    el.value = ['option-7'];
+    el.showTooltip = true;
+    await vsSettle(el, inner);
+
+    expect(el.value).to.deep.equal(['option-7']);
+    expect(inner.value).to.deep.equal(['option-7']);
+  });
+
+  it('T13. assigning a new data array propagates', async () => {
+    const { el, inner } = await vsMount({ showTooltip: true });
+    await vsOpen(inner);
+
+    el.data = [...VS_OPTIONS.slice(0, 10), { value: 'extra', label: 'Extra' }];
+    await vsSettle(el, inner);
+
+    expect(inner.data.length).to.equal(11);
+    expect(vsDataValues(inner)).to.include('extra');
+  });
+
+  it('T14. mutating data in place (data.push) is not propagated; assign a new array instead', async () => {
+    const data = VS_OPTIONS.slice(0, 20);
+    const { el, inner } = await vsMount({ showTooltip: true, data });
+    await vsOpen(inner);
+
+    data.push({ value: 'extra', label: 'Extra' });
+    el.requestUpdate();
+    await vsSettle(el, inner);
+
+    expect(inner.data.length).to.equal(20);
+    expect(vsDataValues(inner)).to.not.include('extra');
+  });
+});

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

@@ -474,11 +474,31 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   syncValueFromVirtualSelect(event: CustomEvent<{ value?: string | string[] }>) {
+    if (!this.showTooltip) return;
     if (event.composedPath()[0] !== event.currentTarget) return;
     if (!event.detail || !('value' in event.detail)) return;
     this.value = event.detail.value ?? (this.multiple ? [] : '');
   }
 
+  protected willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+
+    if (
+      changedProperties.has('showTooltip') &&
+      changedProperties.get('showTooltip') === false &&
+      this.showTooltip &&
+      this.enableVirtualScroll &&
+      !changedProperties.has('value')
+    ) {
+      const inner = this.shadowRoot?.querySelector('nile-virtual-select') as
+        | { value: string | string[] }
+        | null;
+      if (inner && inner.value !== this.value) {
+        this.value = inner.value;
+      }
+    }
+  }
+
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('searchEnabled')) {
       this.updateGroupStickyOffsets();
@@ -1165,7 +1185,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
     // Update the value and display label
     if (this.multiple) {
-      const hasOptions = this.getAllOptions().length > 0;
+      const hasOptions = !this.showTooltip || this.getAllOptions().length > 0;
 
       if (hasOptions) {
       this.value = this.selectedOptions.map(el => el.value);