From ecff59004d71b4a049f0a8f29a85f73484454e01 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Thu, 3 Oct 2024 23:43:19 -0400
Subject: [PATCH] Fixes

---
 .../settings/OpenRouterModelPicker.tsx        | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
index 1302598..db147cf 100644
--- a/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
+++ b/webview-ui/src/components/settings/OpenRouterModelPicker.tsx
@@ -60,13 +60,27 @@ const OpenRouterModelPicker: React.FC = () => {
 					id="model-search"
 					placeholder="Search and select a model..."
 					value={searchTerm}
-					onChange={(e) => {
+					onInput={(e) => {
 						setSearchTerm((e.target as HTMLInputElement).value)
 						setIsDropdownVisible(true)
 					}}
 					onFocus={() => setIsDropdownVisible(true)}
-					style={{ width: "100%", zIndex: 1001 }}
-				/>
+					style={{ width: "100%", zIndex: 1001 }}>
+					{searchTerm && (
+						<div
+							className="input-icon-button codicon codicon-close"
+							aria-label="Clear search"
+							onClick={() => setSearchTerm("")}
+							slot="end"
+							style={{
+								display: "flex",
+								justifyContent: "center",
+								alignItems: "center",
+								height: "100%",
+							}}
+						/>
+					)}
+				</VSCodeTextField>
 				{isDropdownVisible && (
 					<DropdownList>
 						{filteredModelIds.map((modelId) => (