diff --git a/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx b/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx
index dfa3e8b2bca..feb777f32a9 100644
--- a/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_edit_view.test.tsx
@@ -1468,6 +1468,40 @@ describe("KeyEditView", () => {
expect(screen.queryByRole("option", { name: /Beta/ })).not.toBeInTheDocument();
});
+ it("should re-scope teams when the edited key switches to another organization", async () => {
+ const sharedProps = {
+ teams: [
+ { team_id: "team-a", team_alias: "Alpha", organization_id: "org-1" },
+ { team_id: "team-b", team_alias: "Beta", organization_id: "org-2" },
+ ],
+ onCancel: () => {},
+ onSubmit: async () => {},
+ accessToken: "",
+ userID: "",
+ userRole: "Admin",
+ premiumUser: false,
+ };
+
+ const { rerender } = renderWithProviders(
+ ,
+ );
+
+ await waitFor(() => {
+ expect(screen.getByLabelText("Organization")).toHaveValue("Engineering");
+ });
+
+ rerender();
+
+ await waitFor(() => {
+ expect(screen.getByLabelText("Organization")).toHaveValue("Sales");
+ });
+
+ await userEvent.click(screen.getByLabelText("Team ID"));
+
+ expect(await screen.findByRole("option", { name: /Beta/ })).toBeInTheDocument();
+ expect(screen.queryByRole("option", { name: /Alpha/ })).not.toBeInTheDocument();
+ });
+
it("should initialize organization from keyData", async () => {
const keyWithOrg = {
...MOCK_KEY_DATA,
diff --git a/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx b/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
index e925eac5380..3242aee49bc 100644
--- a/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
@@ -28,7 +28,6 @@ import { routerSettingsEditorValue, routerSettingsUpdate } from "../common_compo
import { estimateTooltips, withNormalizedEstimates } from "./estimatedOutputTokens";
import {
currentValuePlaceholder,
- keyOrganizationId,
keyTypeFromRoutes,
modelSentinelOptions,
parseAllowedRoutes,
@@ -106,7 +105,6 @@ export function KeyEditView({
? mapInternalToDisplayNames(keyData.metadata.litellm_disabled_callbacks)
: [],
);
- const [selectedOrganizationId, setSelectedOrganizationId] = useState(keyOrganizationId(keyData));
const [autoRotationEnabled, setAutoRotationEnabled] = useState(keyData.auto_rotate || false);
const [rotationInterval, setRotationInterval] = useState(keyData.rotation_interval || "");
const [neverExpire, setNeverExpire] = useState(!keyData.expires);
@@ -135,6 +133,7 @@ export function KeyEditView({
return project?.project_alias ? `${project.project_alias} (${keyData.project_id})` : keyData.project_id;
})();
+ const selectedOrganizationId = form.watch("organization_id") ?? null;
const allowedRoutesValue = form.watch("allowed_routes");
const selectedModels = (form.watch("models") as string[] | undefined) ?? [];
const allowedRoutes = parseAllowedRoutes(allowedRoutesValue);
@@ -306,7 +305,6 @@ export function KeyEditView({
const handleOrganizationChange = (setField: (value: string | undefined) => void, orgId: string | undefined) => {
setField(orgId);
- setSelectedOrganizationId(orgId || null);
form.setValue("team_id", undefined);
};