Merge pull request #255 from ieedan/select-quick-find

Improved `<Select/>`

Author: ieedan

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "geist-ui-svelte",
-	"version": "0.7.6",
+	"version": "0.7.7",
 	"author": {
 		"name": "Aidan Bleser",
 		"url": "https://aidanbleser.com"
@@ -354,8 +354,8 @@
 		"@fontsource/geist-mono": "^5.0.3",
 		"@fontsource/geist-sans": "^5.0.3",
 		"@sveltejs/kit": "^2.5.10",
-		"@vercel/analytics": "^1.3.0",
-		"@vercel/speed-insights": "^1.0.10",
+		"@vercel/analytics": "^1.3.1",
+		"@vercel/speed-insights": "^1.0.11",
 		"autoprefixer": "^10.4.19",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",

package.json

@@ -278,6 +278,43 @@
 			e.preventDefault();
 			searchEnter();
 		}
+
+		if (show && /^[a-zA-Z]{1,1}$/.test(e.key)) {
+			findByCharacter(e.key);
+		}
+	};
+
+	const findByCharacter = (char: string) => {
+		const options = Array.from(dropDownRef.children);
+
+		let hasSelected = false;
+
+		for (let i = 0; i < options.length; i++) {
+			const option = options[i] as HTMLElement;
+			if (option.tagName == "BUTTON" && option.hasAttribute("data-value")) {
+				const child = findChild(option, (a) =>
+					a.hasAttribute("data-html"),
+				) as HTMLDivElement;
+				if (child.innerText[0].toLowerCase() == char.toLowerCase() && !hasSelected) {
+					selectedIndex = i;
+					hasSelected = true;
+					option.setAttribute("data-focused", "true");
+					const top = dropDownRef.offsetHeight + dropDownRef.scrollTop;
+					const elementBottom = option.offsetHeight + option.offsetTop;
+					if (top < elementBottom) {
+						const scrollTop = elementBottom + 8 - dropDownRef.offsetHeight;
+						dropDownRef.scrollTop = scrollTop;
+					}
+
+					if (top - option.offsetTop + 110 > dropDownRef.offsetHeight) {
+						const scrollTop = option.offsetTop - dropDownRef.offsetHeight / 2;
+						dropDownRef.scrollTop = scrollTop;
+					}
+				} else {
+					option.setAttribute("data-focused", "false");
+				}
+			}
+		}
 	};
 
 	let selectedIndex = 0;