use option value as anchor instead of index

umbraco · Dec 5, 2023 · 5a98e73 · 5a98e73
1 parent 46cf090
commit 5a98e73
Showing 1 changed file with 39 additions and 34 deletions.
diff --git a/packages/uui-combobox-list/lib/uui-combobox-list.element.ts b/packages/uui-combobox-list/lib/uui-combobox-list.element.ts
@@ -79,19 +79,8 @@ export class UUIComboboxListElement extends LitElement {
   @state()
   private _value: FormDataEntryValue | FormData = '';
 
-  private __activeElement: UUIComboboxListOptionElement | undefined;
-  private get _activeElement(): UUIComboboxListOptionElement | undefined {
-    return this.__activeElement;
-  }
-  private set _activeElement(el: UUIComboboxListOptionElement | undefined) {
-    if (this.__activeElement) {
-      this.__activeElement.active = false;
-    }
-    if (el) {
-      el.active = true;
-      this.__activeElement = el;
-    }
-  }
+  @state()
+  private _activeElementValue: string | null = null;
 
   private _selectedElement: UUIComboboxListOptionElement | undefined;
 
@@ -129,30 +118,35 @@ export class UUIComboboxListElement extends LitElement {
   }
 
   private _onSlotChange = () => {
-    this._activeElement = undefined;
     // Get index from first active, remove active from the rest.
-    for (let i = 0; i < this._activeOptions.length; i++) {
-      if (i === 0) {
-        this._activeElement = this._activeOptions[i];
-      } else {
-        this._activeOptions[i].active = false;
-      }
-    }
+    this.#updateActiveElement();
 
     this._updateSelection();
     this.dispatchEvent(
       new UUIComboboxListEvent(UUIComboboxListEvent.INNER_SLOT_CHANGE)
     );
   };
 
+  #updateActiveElement() {
+    for (let i = 0; i < this._activeOptions.length; i++) {
+      this._activeOptions[i].active = false;
+    }
+
+    const activeElement = this._getActiveElement;
+    if (activeElement) {
+      activeElement.active = true;
+    } else {
+      this._goToIndex(0);
+    }
+  }
+
   private _onSelected = (e: Event) => {
     if (this._selectedElement) {
       this._selectedElement.selected = false;
       this._selectedElement.active = false;
       this._selectedElement = undefined;
     }
     this._selectedElement = e.composedPath()[0] as UUIComboboxListOptionElement;
-    this._activeElement = this._selectedElement;
 
     this.value = this._selectedElement.value || '';
     this.displayValue = this._selectedElement.displayValue || '';
@@ -161,37 +155,48 @@ export class UUIComboboxListElement extends LitElement {
   };
   private _onDeselected = (e: Event) => {
     const el = e.composedPath()[0] as UUIComboboxListOptionElement;
-    if (this._activeElement === el) {
-      this._activeElement = undefined;
-    }
     if (this._selectedElement === el) {
       this.value = '';
       this.displayValue = '';
       this.dispatchEvent(new UUIComboboxListEvent(UUIComboboxListEvent.CHANGE));
     }
   };
 
-  private _getActiveIndex(): number {
-    return this._activeElement
-      ? this._options.indexOf(this._activeElement)
-      : -1;
+  private get _getActiveIndex(): number {
+    if (this._activeElementValue === null) return -1;
+
+    return this._options.findIndex(
+      element => element.value === this._activeElementValue
+    );
+  }
+
+  private get _getActiveElement() {
+    if (this._activeElementValue === null) return null;
+
+    return this._options.find(
+      element => element.value === this._activeElementValue
+    );
   }
 
   private _moveIndex = (distance: number) => {
     const newIndex = Math.min(
-      Math.max(this._getActiveIndex() + distance, 0),
+      Math.max(this._getActiveIndex + distance, 0),
       this._options.length - 1
     );
 
     this._goToIndex(newIndex);
   };
 
   private _goToIndex(index: number) {
+    if (this._options.length === 0) return;
+
     index = Math.min(Math.max(index, 0), this._options.length - 1); // Makes sure the index stays within array length
-    this._activeElement = this._options[index];
+    const activeElement = this._options[index];
+    this._activeElementValue = activeElement.value;
+    this.#updateActiveElement();
 
-    if (this._activeElement) {
-      this._activeElement.scrollIntoView({
+    if (activeElement) {
+      activeElement.scrollIntoView({
         behavior: 'auto',
         block: 'nearest',
         inline: 'nearest',
@@ -222,7 +227,7 @@ export class UUIComboboxListElement extends LitElement {
 
       case 'Enter': {
         e.preventDefault();
-        this._activeElement?.click();
+        this._getActiveElement?.click();
         break;
       }