Fixes handlers not focusing items correctly when custom search option…

…s are used
klovaaxel · Feb 14, 2024 · 7cf8e1d · 7cf8e1d
1 parent b8c93d6
commit 7cf8e1d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/src/combobox-framework.ts b/src/combobox-framework.ts
@@ -48,14 +48,23 @@ export default class ComboboxFramework extends HTMLElement {
                 this.selectItemByValue(newValue, false);
                 break;
             case "data-fuse-options":
-                if (!this._originalList) fetchOriginalList.call(this);
+                // #region If the fuse object is not created, save the options and return
+                if (!this._fuse) {
+                    this._fuseOptions = JSON.parse(newValue);
+                    return;
+                }
+                // #endregion
+
+                // #region If the fuse object is created, recreate it and search the list
+                fetchOriginalList.call(this);
 
                 this._fuseOptions = JSON.parse(newValue);
                 this._fuse = new Fuse(
                     Array.from((this._originalList!.cloneNode(true) as HTMLElement).children),
                     this._fuseOptions,
                 );
                 this.searchList();
+                // #endregion
                 break;
             case "data-listbox":
                 this._forceValue = !!newValue;
@@ -338,8 +347,8 @@ export default class ComboboxFramework extends HTMLElement {
      */
     public focusItem(item: HTMLElement): void {
         if (!item) return;
-        item.focus();
         this.unfocusAllItems();
+        item.focus();
         item.setAttribute("aria-selected", "true");
     }
 

diff --git a/src/helpers.ts b/src/helpers.ts
@@ -9,10 +9,9 @@ import ComboboxFramework from "./combobox-framework";
  */
 export function fetchList(this: ComboboxFramework): void {
     if (this._list) return;
-    let list = this.querySelector('[slot="list"] [data-list]') as HTMLElement;
-    if (!list) list = this.querySelector('[slot="list"]') as HTMLElement;
-    if (!list) throw new Error("List element not found");
-    this._list = list;
+    this._list = this.querySelector('[slot="list"] [data-list]') as HTMLElement;
+    if (!this._list) this._list = this.querySelector('[slot="list"]') as HTMLElement;
+    if (!this._list) throw new Error("List element not found");
 }
 
 /**
@@ -39,11 +38,6 @@ export function fetchInput(this: ComboboxFramework): void {
 export function fetchOriginalList(this: ComboboxFramework): void {
     if (this._originalList) return;
 
-    if (this._list) {
-        this._originalList = this._list.cloneNode(true) as HTMLElement;
-        return;
-    }
-
     fetchList.call(this);
     this._originalList = this._list!.cloneNode(true) as HTMLElement;
 }