diff --git a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx
index 4ff13599a2e..2b7bdf7c9f3 100644
--- a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx
@@ -121,6 +121,25 @@ describe("DeleteResourceModal", () => {
expect(deleteButton).toBeEnabled();
});
+ it("should enable delete button when the confirmation input matches after surrounding whitespace is trimmed", () => {
+ renderWithProviders();
+ const input = screen.getByPlaceholderText("prod-key");
+ fireEvent.change(input, { target: { value: " prod-key " } });
+ expect(screen.getByRole("button", { name: /delete/i })).toBeEnabled();
+ });
+
+ it("should keep delete disabled when trimmed confirmation input still does not match", () => {
+ renderWithProviders();
+ fireEvent.change(screen.getByPlaceholderText("prod-key"), { target: { value: " other-key " } });
+ expect(screen.getByRole("button", { name: /delete/i })).toBeDisabled();
+ });
+
+ it("should enable delete when the stored name itself has surrounding whitespace", () => {
+ renderWithProviders();
+ fireEvent.change(screen.getByRole("textbox"), { target: { value: "prod-key" } });
+ expect(screen.getByRole("button", { name: /delete/i })).toBeEnabled();
+ });
+
it("should reset requiredConfirmation input when modal opens", async () => {
const user = userEvent.setup();
const { rerender } = renderWithProviders();
diff --git a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx
index 2d8a523397a..292b25add81 100644
--- a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx
@@ -101,7 +101,10 @@ export default function DeleteResourceModal({