add support for async options

Author: JesmoDev

packages/uui-combobox-list/lib/UUIComboboxListEvent.ts

@@ -3,6 +3,7 @@ import { UUIComboboxListElement } from './uui-combobox-list.element';
 
 export class UUIComboboxListEvent extends UUIEvent<UUIComboboxListElement> {
   public static readonly CHANGE: string = 'change';
+  public static readonly SLOT_CHANGE: string = 'slot-change';
 
   constructor(evName: string, eventInit: any | null = {}) {
     super(evName, {

packages/uui-combobox-list/lib/uui-combobox-list.element.ts

@@ -25,11 +25,11 @@ export class UUIComboboxListElement extends LitElement {
 
   /**
    * Value of selected option.
-   * @type { string }
+   * @type { FormDataEntryValue | FormData }
    * @attr
    * @default ""
    */
-  @property({ type: String })
+  @property()
   public get value() {
     return this._value;
   }
@@ -87,7 +87,7 @@ export class UUIComboboxListElement extends LitElement {
   private _activeOptions!: UUIComboboxListOptionElement[];
 
   @state()
-  private _value: FormDataEntryValue = '';
+  private _value: FormDataEntryValue | FormData = '';
 
   private __activeElement: UUIComboboxListOptionElement | undefined;
   private get _activeElement(): UUIComboboxListOptionElement | undefined {
@@ -150,6 +150,9 @@ export class UUIComboboxListElement extends LitElement {
     }
 
     this._updateSelection();
+    this.dispatchEvent(
+      new UUIComboboxListEvent(UUIComboboxListEvent.SLOT_CHANGE)
+    );
   };
 
   private _onSelected = (e: Event) => {

packages/uui-combobox/lib/uui-combobox.element.ts

@@ -95,6 +95,7 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
     `,
   ];
 
+  @property({ attribute: 'value', reflect: true })
   get value() {
     return this._value;
   }
@@ -198,22 +199,26 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
         UUIComboboxListEvent.CHANGE,
         this._onChange
       );
+      this._comboboxList.addEventListener(
+        UUIComboboxListEvent.SLOT_CHANGE,
+        this._onSlotChange
+      );
 
-      if (typeof this.value === 'string') {
-        await this.updateComplete;
-        this._updateValue(this.value);
-      }
+      await this.updateComplete;
+      this._updateValue(this.value);
     }
   }
 
   private _onPhoneChange = () => {
     this._isPhone = this.phoneMediaQuery.matches;
   };
 
-  private _updateValue(value: string) {
+  private _updateValue(value: FormDataEntryValue | FormData) {
     if (this._comboboxList) {
       this._comboboxList.value = value;
-      this._displayValue = this._comboboxList?.displayValue || '';
+      requestAnimationFrame(
+        () => (this._displayValue = this._comboboxList.displayValue || '')
+      );
     }
   }
 
@@ -238,14 +243,19 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
     this._open();
   };
 
+  private _onSlotChange = () => {
+    if (this.value && this.value !== this._comboboxList?.value) {
+      this._updateValue(this.value);
+    }
+  };
+
   private _onChange = (e: Event) => {
     e.stopImmediatePropagation();
 
     this.value = this._comboboxList?.value || '';
     this.search = this.value ? this.search : '';
 
     this._onClose();
-
     this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));
   };