Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions packages/components/select/select.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5364,6 +5364,45 @@ describe('KbqSelect', () => {
while (restore.length) restore.pop()!();
}
}));

it('should not throw when the hidden-text element is not yet in the DOM', fakeAsync(() => {
// Regression: in multiple mode with preset values restored programmatically,
// `calculateHiddenItems` may run (via setTimeout) before the trigger view has
// materialized `.kbq-select__match-hidden-text`. `querySelector` then returns null,
// and on Angular 20 `Renderer2.setStyle(null, ...)` throws. We must tolerate the
// missing element instead of crashing.
const originalQuerySelector = HTMLElement.prototype.querySelector;

const fixtureTest = TestBed.createComponent(MultiSelectNarrow);
const componentInstance: MultiSelectNarrow = fixtureTest.componentInstance;
const triggerEl = fixtureTest.debugElement.query(By.css('.kbq-select__trigger')).nativeElement;

fixtureTest.detectChanges();

triggerEl.click();
fixtureTest.detectChanges();

const options: NodeListOf<HTMLElement> = overlayContainerElement.querySelectorAll('kbq-option');

options.item(0)?.click();
options.item(1)?.click();

fixtureTest.detectChanges();
tick();
flush();

HTMLElement.prototype.querySelector = function (selectors: string) {
if (selectors === '.kbq-select__match-hidden-text') return null;

return originalQuerySelector.call(this, selectors);
} as typeof HTMLElement.prototype.querySelector;

try {
expect(() => componentInstance.select().calculateHiddenItems()).not.toThrow();
} finally {
HTMLElement.prototype.querySelector = originalQuerySelector;
}
}));
});

describe('option tooltip', () => {
Expand Down
13 changes: 12 additions & 1 deletion packages/components/select/select.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1317,6 +1317,12 @@ export class KbqSelect
const itemsCounter = this.trigger()!.nativeElement.querySelector('.kbq-select__match-hidden-text');
const matcherList = this.trigger()!.nativeElement.querySelector('.kbq-select__match-list');

if (!itemsCounter || !matcherList) {
this._changeDetectorRef.markForCheck();

return;
}

const itemsCounterShowed = itemsCounter.offsetTop < itemsCounter.offsetHeight;
const itemsCounterWidth: number = Math.floor(itemsCounter.getBoundingClientRect().width);

Expand Down Expand Up @@ -1880,7 +1886,12 @@ export class KbqSelect
private getTotalVisibleItems(): [number, number] {
const triggerClone = this.buildTriggerClone();

this._renderer.setStyle(triggerClone.querySelector('.kbq-select__match-hidden-text'), 'display', 'block');
const hiddenText = triggerClone.querySelector('.kbq-select__match-hidden-text');

if (hiddenText) {
this._renderer.setStyle(hiddenText, 'display', 'block');
}

this._renderer.appendChild(this.trigger()!.nativeElement, triggerClone);

let visibleItemsCount: number = 0;
Expand Down
Loading