diff --git a/src/combobox-framework.ts b/src/combobox-framework.ts
index 07e2e9f..fa4f25a 100644
--- a/src/combobox-framework.ts
+++ b/src/combobox-framework.ts
@@ -69,19 +69,11 @@ export default class ComboboxFramework extends HTMLElement {
public connectedCallback(): void {
const shadow = this.shadowRoot as ShadowRoot;
+ shadow.innerHTML = ``;
- // #region Create the shadow DOM
- shadow.innerHTML = `
-
-
- `;
- // #endregion
-
- // #region Fetch the input and list elements
fetchInput.call(this);
fetchListContainer.call(this);
fetchList.call(this);
- // #endregion
setBasicAttributes.call(this);
@@ -90,7 +82,7 @@ export default class ComboboxFramework extends HTMLElement {
this.searchList();
this.addEventListeners();
- this.forcedValue();
+ this.forceValue();
}
public disconnectedCallback(): void {
@@ -135,9 +127,6 @@ export default class ComboboxFramework extends HTMLElement {
input.addEventListener("focus", this.toggleList.bind(this, true), {
signal: this.abortController.signal,
});
- // #endregion
-
- // #region Add event listeners to framework element
input.addEventListener("keydown", handleComboBoxKeyPress.bind(this), {
signal: this.abortController.signal,
});
@@ -200,7 +189,6 @@ export default class ComboboxFramework extends HTMLElement {
}
// #endregion
- // #region Search the list
let searchedList = this._fuse.search(input.value).slice(0, this.limit);
// #region Sort the list based on the weight of the items if they have a weight and a score
@@ -250,13 +238,8 @@ export default class ComboboxFramework extends HTMLElement {
}
// #endregion
- // #region Add event listeners to the list item elements
this.addEventListenersToListItems();
- // #endregion
-
- // #region Show the list after the search is complete
this.toggleList(openList);
- // #endregion
}
private highlightText(text: string, searchString: string): string {
@@ -274,14 +257,10 @@ export default class ComboboxFramework extends HTMLElement {
}
private unfocusAllItems(): void {
- // #region Check if required variables are set
const list = fetchList.call(this);
- // #endregion
- // #region Unfocus all items in the list
for (const item of list.querySelectorAll("[aria-selected]"))
item.removeAttribute("aria-selected");
- // #endregion
}
public selectItem(item: HTMLElement, grabFocus = true): void {
@@ -318,33 +297,28 @@ export default class ComboboxFramework extends HTMLElement {
}
public clearInput(grabFocus = true): void {
- // #region Check if required variables are set
const input = fetchInput.call(this);
- // #endregion
- // #region Clear the input element
input.value = "";
if (grabFocus) input.focus();
this.toggleList(false);
- // #endregion
}
- public forcedValue(): void {
- // #region Check if required variables are set
+ public forceValue(): void {
+ if (!this.shouldForceValue) return;
+ if (this.dataset.value) return;
+ if (!this.input?.value) return;
+
const list = fetchList.call(this);
- // #endregion
- // #region If forceValue is true and we don't have a value selected, select the first item (best match) in the list or empty the input and value
- if (this.shouldForceValue && !!this.input?.value && !this.dataset.value) {
- const bestMatch = list.children[0] as HTMLElement;
- if (bestMatch) this.selectItem(bestMatch, false);
- else {
- this.clearInput(false); // Clear the input
- this.dataset.value = ""; // Clear the value
- this.sendChangeEvent(); // Send a change event
- }
+ const bestMatch = list.children[0] as HTMLElement;
+ if (bestMatch) {
+ this.selectItem(bestMatch, false);
+ } else {
+ this.clearInput(false); // Clear the input
+ this.dataset.value = ""; // Clear the value
+ this.sendChangeEvent(); // Send a change event
}
- // #endregion
}
private sendChangeEvent(): void {
diff --git a/src/handlers.ts b/src/handlers.ts
index 18335bc..f161ef2 100644
--- a/src/handlers.ts
+++ b/src/handlers.ts
@@ -142,7 +142,7 @@ export function handleBlur(this: ComboboxFramework): void {
if (this.querySelector(":focus")) return;
// #region If forceValue is true, select the first item in the list
- this.forcedValue();
+ this.forceValue();
// #endregion
this.toggleList(false);