diff --git a/src/components/ha-picker-combo-box.ts b/src/components/ha-picker-combo-box.ts index 6065ec2724..c81730d00a 100644 --- a/src/components/ha-picker-combo-box.ts +++ b/src/components/ha-picker-combo-box.ts @@ -133,6 +133,8 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) { @state() private _sectionTitle?: string; + @state() private _valuePinned = true; + private _allItems: (PickerComboBoxItem | string)[] = []; private _selectedItemIndex = -1; @@ -194,6 +196,15 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) { .renderItem=${this._renderItem} style="min-height: 36px;" class=${this._listScrolled ? "scrolled" : ""} + .layout=${this.value && this._valuePinned + ? { + pin: { + index: this._getInitialSelectedIndex(), + block: "center", + }, + } + : undefined} + @unpinned=${this._handleUnpinned} @scroll=${this._onScrollList} @focus=${this._focusList} @visibilityChanged=${this._visibilityChanged} @@ -244,6 +255,11 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) { } } + @eventOptions({ passive: true }) + private _handleUnpinned() { + this._valuePinned = false; + } + private _getAdditionalItems = (searchString?: string) => this.getAdditionalItems?.(searchString) || []; @@ -592,6 +608,24 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) { private _keyFunction = (item: PickerComboBoxItem | string) => typeof item === "string" ? item : item.id; + private _getInitialSelectedIndex() { + if (!this._virtualizerElement || !this.value) { + return 0; + } + + const index = this._virtualizerElement.items.findIndex( + (item) => + typeof item !== "string" && + (item as PickerComboBoxItem).id === this.value + ); + + if (index === -1) { + return 0; + } + + return index; + } + static get styles() { return [ ...super.styles,