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 5e771e804ec..2b7bdf7c9f3 100644
--- a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.test.tsx
@@ -134,6 +134,12 @@ describe("DeleteResourceModal", () => {
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 6f9a99cc164..292b25add81 100644
--- a/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/DeleteResourceModal.tsx
@@ -102,7 +102,8 @@ export default function DeleteResourceModal({
variant="destructive"
onClick={onOk}
disabled={
- (!!requiredConfirmation && requiredConfirmationInput.trim() !== requiredConfirmation) || confirmLoading
+ (!!requiredConfirmation && requiredConfirmationInput.trim() !== requiredConfirmation.trim()) ||
+ confirmLoading
}
>
{confirmLoading ? "Deleting..." : "Delete"}