From 35559c4d60f36108c179ec73ae3cdd3858ca865b Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <ryan@berri.ai>
Date: Wed, 15 Apr 2026 12:32:38 -0700
Subject: [PATCH] fix(ui): use antd Select for MCP ToolTestPanel bool inputs

---
 .../components/mcp_tools/ToolTestPanel.test.tsx  |  2 +-
 .../src/components/mcp_tools/ToolTestPanel.tsx   | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.test.tsx b/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.test.tsx
index 883e30e4922..08df1fbea2d 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.test.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.test.tsx
@@ -89,7 +89,7 @@ describe("ToolTestPanel defaults", () => {
     expect(screen.getByLabelText("message")).toHaveValue("");
     expect(screen.getByLabelText("attempts")).toHaveValue(0);
     expect(screen.getByLabelText("ratio")).toHaveValue(0.4);
-    expect(screen.getByDisplayValue("True")).toBeInTheDocument();
+    expect(screen.getByTitle("True")).toBeInTheDocument();
 
     const keywordsTextarea = screen.getByTestId("textarea-keywords");
     expect(JSON.parse(keywordsTextarea.value)).toEqual([""]);
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.tsx b/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.tsx
index abd955f3292..7a592785a44 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, TextInput } from "@tremor/react";
 import { MCPTool, InputSchema, InputSchemaProperty } from "./types";
-import { Form, Tooltip } from "antd";
+import { Form, Select, Tooltip } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import NotificationsManager from "../molecules/notifications_manager";
 
@@ -480,14 +480,14 @@ export function ToolTestPanel({
                         )}
 
                         {prop.type === "boolean" && (
-                          <select
-                            className="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm transition-colors"
-                            defaultValue={(initialValue ?? false).toString()}
+                          <Select
+                            placeholder={`Select ${key}`}
+                            allowClear={!actualSchema.required?.includes(key)}
+                            className="w-full"
                           >
-                            {!actualSchema.required?.includes(key) && <option value="">Select {key}</option>}
-                            <option value="true">True</option>
-                            <option value="false">False</option>
-                          </select>
+                            <Select.Option value={true}>True</Select.Option>
+                            <Select.Option value={false}>False</Select.Option>
+                          </Select>
                         )}
 
                         {(prop.type === "object" || prop.type === "array") && (