[Filter field / Autocomplete] Virtualized elements change width of overlay when scrolled into view.

[kaikcreator]

Bug Report

Expected Behavior

Filter suggestions panel width should consider max with of their content from the beginning.

Current Behavior

Right now, the filter suggestions panel width only takes into account the data displayed when expanded, but if some wider content appears on scroll, the width of the panel is adjusted (causing an unsightly "jump" effect).

Steps to Reproduce

See live code: https://stackblitz.com/edit/github-g3mxzb

1. Click in filter component
2. Select item filter key
3. Scroll down suggestions until some even much longer item is displayed

[tomheller]

Hey @kaikcreator! Thank you for reporting this, this seems like a problem with the virtualization of the items in the autocomplete component.

I will have a look.

[tomheller]

I have tracked it down to the usage of the dt-highlight in the filter-field options, which wrap all option elements.

barista/libs/barista-components/filter-field/src/filter-field.html

Lines 77 to 79 in a1d2838

	<dt-highlight [term]="_inputValue">{{
	optionOrGroupDef.option!.viewValue
	}}</dt-highlight>

The dt-highlight only renders, when it is in viewport, which let's the dropdown grow as you scroll down, because the options only are rendered in the dom when they become visible.

barista/libs/barista-components/highlight/src/highlight.ts

Lines 138 to 146 in a1d2838

	this._isInViewportSubscription = createInViewportStream(
	this._elementRef,
	0,
	).subscribe((value) => {
	this._isInViewport = value;
	if (value) {
	this._highlight();
	}
	});