diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.test.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.test.tsx
index 194f717a92f..1b5603045e0 100644
--- a/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.test.tsx
+++ b/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.test.tsx
@@ -68,6 +68,23 @@ describe("BudgetFallbacksEditor", () => {
expect(labels.length).toBe(2);
});
+ it("resets internal state when remounted with empty value via key prop", () => {
+ const onChange = vi.fn();
+ const { rerender } = render(
+ ,
+ );
+ expect(screen.getAllByText("Primary Model").length).toBe(1);
+
+ rerender();
+ expect(screen.queryByText("Primary Model")).toBeNull();
+ expect(screen.getByText("Add Budget Fallback")).toBeTruthy();
+ });
+
it("shows ordering hint when multiple fallback models are configured", () => {
const onChange = vi.fn();
render(
diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
index 443cbd34e32..479673d6057 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@@ -204,6 +204,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp
const [routerSettings, setRouterSettings] = useState(null);
const [budgetLimits, setBudgetLimits] = useState([]);
const [budgetFallbacks, setBudgetFallbacks] = useState>({});
+ const [budgetFallbacksKey, setBudgetFallbacksKey] = useState(0);
const [routerSettingsKey, setRouterSettingsKey] = useState(0);
const [agentsList, setAgentsList] = useState<{ agent_id: string; agent_name: string }[]>([]);
const [selectedAgentId, setSelectedAgentId] = useState(null);
@@ -223,6 +224,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp
setSelectedProjectId(null);
setBudgetLimits([]);
setBudgetFallbacks({});
+ setBudgetFallbacksKey((k) => k + 1);
};
const handleCancel = () => {
@@ -243,6 +245,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp
setSelectedProjectId(null);
setBudgetLimits([]);
setBudgetFallbacks({});
+ setBudgetFallbacksKey((k) => k + 1);
};
useEffect(() => {
@@ -567,6 +570,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp
form.resetFields();
setBudgetLimits([]);
setBudgetFallbacks({});
+ setBudgetFallbacksKey((k) => k + 1);
localStorage.removeItem("userData" + userID);
} catch (error) {
console.log("error in create key:", error);
@@ -1097,6 +1101,7 @@ const CreateKey: React.FC = ({ team, teams, data, addKey, autoOp
}
>
0) {
+ values.budget_fallbacks = budgetFallbacks;
+ }
await onSubmit(values);
} finally {