diff --git a/packages/uui-combobox/lib/uui-combobox.element.ts b/packages/uui-combobox/lib/uui-combobox.element.ts index 7e422b7f6..6a4d6b815 100644 --- a/packages/uui-combobox/lib/uui-combobox.element.ts +++ b/packages/uui-combobox/lib/uui-combobox.element.ts @@ -34,11 +34,11 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') { return super.value; } set value(newValue) { + super.value = newValue; + if (typeof newValue === 'string') { - this.#updateValue(newValue); + this.#updateValue(); } - - super.value = newValue; } /** @@ -166,7 +166,17 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') { this.#phoneMediaQuery.removeEventListener('change', this.#onPhoneChange); } - protected async firstUpdated() { + #onSlotChange() { + if (this.#comboboxList) { + this.#comboboxList.removeEventListener( + UUIComboboxListEvent.CHANGE, + this.#onChange, + ); + this.#comboboxList.removeEventListener( + UUIComboboxListEvent.INNER_SLOT_CHANGE, + this.#onInnerSlotChange, + ); + } const list = this._comboboxListElements?.[0]; if (list) { @@ -178,21 +188,22 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') { ); this.#comboboxList.addEventListener( UUIComboboxListEvent.INNER_SLOT_CHANGE, - this.#onSlotChange, + this.#onInnerSlotChange, ); - - await this.updateComplete; - this.#updateValue(this.value); } + + this.updateComplete.then(() => { + this.#updateValue(); + }); } #onPhoneChange = () => { this._isPhone = this.#phoneMediaQuery.matches; }; - #updateValue(value: FormDataEntryValue | FormData) { + #updateValue() { if (this.#comboboxList) { - this.#comboboxList.value = value; + this.#comboboxList.value = this.value; requestAnimationFrame( () => (this._displayValue = this.#comboboxList.displayValue || ''), ); @@ -233,9 +244,9 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') { this.#onOpen(); }; - #onSlotChange = () => { + #onInnerSlotChange = () => { if (this.value && this.value !== this.#comboboxList?.value) { - this.#updateValue(this.value); + this.#updateValue(); } }; @@ -344,7 +355,7 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') { #renderDropdown = () => { return html``; };