diff --git a/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.test.tsx b/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.test.tsx
index d8a955b719c..ba380662403 100644
--- a/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.test.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.test.tsx
@@ -101,18 +101,24 @@ vi.mock("./build_complexity_router_config", async (importOriginal) => {
});
// A real TeamDropdown fetches teams and renders an antd Select; the wiring under test is
-// whether team_id is registered, validated and forwarded, so a plain control stands in.
+// whether team_id is registered, validated and forwarded, so a plain control stands in. The
+// clear button mirrors the real dropdown's x, which emits null rather than a string.
vi.mock("../common_components/team_dropdown", () => ({
- default: ({ value, onChange }: { value?: string; onChange?: (next: string) => void }) => (
-
+ default: ({ value, onChange }: { value?: string; onChange?: (next: string | null) => void }) => (
+ <>
+
+
+ >
),
}));
@@ -354,6 +360,25 @@ describe("AddAutoRouterTab", () => {
expect(handleAddAutoRouterSubmit).not.toHaveBeenCalled();
});
+ // The shared dropdown emits null on clear while this form's schema wants a string, so the
+ // form maps null back to "": the user sees the pick-a-team message, not a zod type error.
+ it("treats a team picked and then cleared like no team at all", async () => {
+ const user = userEvent.setup();
+ vi.mocked(getMissingTiersError).mockReturnValue(null);
+
+ renderWithProviders(
+ ,
+ );
+
+ await user.type(screen.getByPlaceholderText(/smart_router/i), "team-scoped-router");
+ await user.selectOptions(screen.getByTestId("team-dropdown"), "team-1");
+ await user.click(screen.getByTestId("team-dropdown-clear"));
+ await user.click(screen.getByRole("button", { name: /add auto router/i }));
+
+ expect(await screen.findByText("Please select a team to continue")).toBeInTheDocument();
+ expect(handleAddAutoRouterSubmit).not.toHaveBeenCalled();
+ });
+
it("defaults a new router to session affinity off, matching the backend field default", async () => {
const user = userEvent.setup();
vi.mocked(getMissingTiersError).mockReturnValue(null);
diff --git a/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx b/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx
index 318adcce369..03b7432e4ec 100644
--- a/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx
@@ -548,7 +548,9 @@ const AddAutoRouterTab: React.FC = ({
"Select the team this auto router belongs to. Only keys for this team will be able to call it.",
)}
>
- {({ id, value, onChange }) => }
+ {({ id, value, onChange }) => (
+ onChange(next ?? "")} />
+ )}
)}