diff --git a/src/combobox-framework.ts b/src/combobox-framework.ts index e745400..d4432f3 100644 --- a/src/combobox-framework.ts +++ b/src/combobox-framework.ts @@ -173,25 +173,6 @@ export default class ComboboxFramework extends HTMLElement { this._originalList = this._list!.cloneNode(true) as HTMLElement; } - /** - * Removes event listeners from the list item elements - * @private - * @memberof ComboboxFramework - * @returns {void} - */ - private removeEventListenersFromListItems(): void { - // #region Remove event listeners from the list item elements - if (!this._list) this.fetchList(); - const children = this._list!.children; - for (let i = 0; i < children.length; i++) { - const child = children[i] as HTMLElement; - child.removeEventListener("keydown", this.handleListKeyPress.bind(this)); - child.removeEventListener("keyup", this.handleKeyUp.bind(this)); - child.removeEventListener("click", this.selectItem.bind(this, child, true)); - } - // #endregion - } - /** * Set basic attributes for the input and list elements. * Mutates the input and list elements that are stored in `_input` and `_list` @@ -279,6 +260,25 @@ export default class ComboboxFramework extends HTMLElement { // #endregion } + /** + * Removes event listeners from the list item elements + * @private + * @memberof ComboboxFramework + * @returns {void} + */ + private removeEventListenersFromListItems(): void { + // #region Remove event listeners from the list item elements + if (!this._list) this.fetchList(); + const children = this._list!.children; + for (let i = 0; i < children.length; i++) { + const child = children[i] as HTMLElement; + child.removeEventListener("keydown", this.handleListKeyPress.bind(this)); + child.removeEventListener("keyup", this.handleKeyUp.bind(this)); + child.removeEventListener("click", this.selectItem.bind(this, child, true)); + } + // #endregion + } + /** * Search the list and update the list element with the new, filtered, and sorted list * @private @@ -465,19 +465,6 @@ export default class ComboboxFramework extends HTMLElement { this.sendChangeEvent(); } - /** - * Sends a change event - * @private - * @memberof ComboboxFramework - * @returns {void} - */ - private sendChangeEvent(): void { - if (this.dataset.value === this._lastValue) return; - const event = new Event("change"); - this.dispatchEvent(event); - this._lastValue = this.dataset.value; - } - /** * Selects an item in the list by its value * @private @@ -485,7 +472,7 @@ export default class ComboboxFramework extends HTMLElement { * @memberof ComboboxFramework * @returns {void} */ - selectItemByValue(value: string | null, grabFocus = true): void { + private selectItemByValue(value: string | null, grabFocus = true): void { if (!value) return; if (!this._list) this.fetchList(); const item = this._list!.querySelector(`[data-value="${value}"]`) as HTMLElement; @@ -511,25 +498,6 @@ export default class ComboboxFramework extends HTMLElement { // #endregion } - /** - * Toggles the expanded state of the combobox if the focus is lost - * @param event {FocusEvent} The blur event - * @memberof ComboboxFramework - * @returns {void} - */ - private handleBlur(): void { - // Set a timeout to force the focus event on the list item to fire before the foucsout event on the input element - setTimeout(() => { - if (this.querySelector(":focus")) return; - - // #region If forceValue is true, select the first item in the list - this.forceValue(); - // #endregion - - this.toggleList(false); - }, 0); - } - /** * Forces the value of the input element to the first item in the list if the input element is not empty * @private @@ -555,6 +523,25 @@ export default class ComboboxFramework extends HTMLElement { // #endregion } + /** + * Toggles the expanded state of the combobox if the focus is lost + * @param event {FocusEvent} The blur event + * @memberof ComboboxFramework + * @returns {void} + */ + private handleBlur(): void { + // Set a timeout to force the focus event on the list item to fire before the foucsout event on the input element + setTimeout(() => { + if (this.querySelector(":focus")) return; + + // #region If forceValue is true, select the first item in the list + this.forceValue(); + // #endregion + + this.toggleList(false); + }, 0); + } + /** * Handles the key press event on the input element * @param event {KeyboardEvent} The key press event @@ -714,6 +701,19 @@ export default class ComboboxFramework extends HTMLElement { } // #endregion } + + /** + * Sends a change event + * @private + * @memberof ComboboxFramework + * @returns {void} + */ + private sendChangeEvent(): void { + if (this.dataset.value === this._lastValue) return; + const event = new Event("change"); + this.dispatchEvent(event); + this._lastValue = this.dataset.value; + } } // #region Register the component