src/better-select.js

@@ -126,9 +126,6 @@ export class BetterSelect extends HTMLElement {
 	#abortOpen
 	#value = {}
 
-	/** @type {number} */
-	#index = undefined
-
 	#internals = this.attachInternals()
 	#states = new StateAttributeSet(this, this.#internals.states)
 
@@ -163,7 +160,7 @@ export class BetterSelect extends HTMLElement {
 		#text:empty ~ *[name="clear"] {
 			display: none;
 		}
-		[part="drop-down"], [part~="item"] {
+		[part="drop-down"], [part="item"] {
 			/* Resets */
 			border: unset;
 			outline: unset;
@@ -198,10 +195,10 @@ export class BetterSelect extends HTMLElement {
 				cursor: pointer;
 			}
 		}
-		[part~="item"]:focus {
+		[part="item"]:focus {
 			font-weight: bold;
 		}
-		[part~="item"][hidden] {
+		[part="item"][hidden] {
 			display: none;
 		}
 		slot[name="loading"] {
@@ -316,14 +313,6 @@ export class BetterSelect extends HTMLElement {
 					this.keyboardSearchAppend(key)
 					event.preventDefault()
 					event.stopPropagation()
-				} else if (key == "Delete") {
-					this.clear()
-				} else if (key == "ArrowDown") {
-					event.preventDefault()
-					this.next()
-				} else if (key == "ArrowUp") {
-					event.preventDefault()
-					this.previous()
 				}
 			}
 		})
@@ -432,9 +421,8 @@ export class BetterSelect extends HTMLElement {
 	/** @param {String} value */
 	search(value) {
 		for (const item of this.list.children) {
-			if (item instanceof HTMLElement) {
+			if (item instanceof HTMLElement)
 				item.toggleAttribute("hidden", !this.match(value, item))
-			}
 		}
 	}
 
@@ -445,21 +433,18 @@ export class BetterSelect extends HTMLElement {
 			this.close()
 			return
 		}
-		const candidates = /** @type {HTMLElement[]} */(Array.from(this.list.children).filter(child => !child.hasAttribute("hidden") && !child.part.contains("disabled")))
+		const candidates = /** @type {HTMLElement[]} */(Array.from(this.list.children).filter(child => !child.hasAttribute("hidden")))
 		if (candidates.length) {
 			this.setOption(candidates[0])
 			this.close()
 		}
 	}
 
-	static searchHideDisabled = true
-
 	/**
 	 * @param {string} value
 	 * @param {HTMLElement} item
 	 */
 	match(value, item) {
-		if (/** @type {Object} */(value && this.constructor).searchHideDisabled && item.part.contains("disabled")) return false
 		return item.innerText.toLowerCase().match(value.toLowerCase())
 	}
 
@@ -473,17 +458,14 @@ export class BetterSelect extends HTMLElement {
 
 	/** @param {HTMLElement} option */
 	setOption(option) {
-		return this.setValue(Number(option.dataset.index), option.dataset.value, option.innerText)
+		return this.setValue(option.dataset.value, option.innerText)
 	}
 
 	/**
-	 * @param {number} index
 	 * @param {string} value
 	 * @param {string} state
 	 */
-	setValue(index, value, state=value) {
+	setValue(value, state=value) {
-		this.#index = Number(index)
-
 		this.#value = {value, state}
 		this.dispatchEvent(new Event("change", {bubbles: true}));
 		this.#internals.setFormValue(value, state)
@@ -515,10 +497,9 @@ export class BetterSelect extends HTMLElement {
 		if (value === undefined) {
 			this.clear()
 		} else {
-			let index = 0
 			for (const option of this.options) {
 				if (option.value === String(value)) {
-					this.setValue(index++, option.value, option.innerText)
+					this.setValue(option.value, option.innerText)
 					return
 				}
 			}
@@ -530,9 +511,8 @@ export class BetterSelect extends HTMLElement {
 
 	setOptions() {
 		this.list.replaceChildren()
-		let idx = 0
 		for (const option of this.options) {
-			const fragment = f`<li data-index=${idx++} tabindex="0" part="item" data-value="${option.value}">${option.innerText}</li>`
+			const fragment = f`<li tabindex="0" part="item" data-value="${option.value}">${option.innerText}</li>`
 			const li = fragment.querySelector("li")
 			if (option.disabled) {
 				li.part.add("disabled")
@@ -574,7 +554,7 @@ export class BetterSelect extends HTMLElement {
 	get form() { return this.#internals.form }
 
 	clear() {
-		this.setValue(undefined, undefined, "")
+		this.setValue(undefined, "")
 	}
 
 	/**
@@ -590,21 +570,6 @@ export class BetterSelect extends HTMLElement {
 		return "Please select an option."
 	}
 
-	next() {
-		const index = (this.#index ?? -1) + 1
-		const item = /** @type {HTMLElement} */(this.list.children[index])
-		if (item) {
-			this.setOption(item)
-		}
-	}
-
-	previous() {
-		const index = (this.#index ?? this.options.length) - 1
-		const item = /** @type {HTMLElement} */(this.list.children[index])
-		if (item) {
-			this.setOption(item)
-		}
-	}
 
 	setValidity() {
 		if (this.required) {