From 7bb2d78394d395b74363115aa6f33b4f11ed3888 Mon Sep 17 00:00:00 2001
From: "Ethan T." <ethanchang32@gmail.com>
Date: Sat, 14 Mar 2026 12:58:58 +0800
Subject: [PATCH] fix: add getPopupContainer to Select components in fallback
 modal to fix z-index issue (#23516)

The model dropdown menus in the Add Fallbacks modal were rendering behind
the modal overlay because Ant Design portals Select dropdowns to document.body
by default. By setting getPopupContainer to attach the dropdown to its parent
element, the dropdown inherits the modal's stacking context and renders above
the modal.

Fixes #17895
---
 .../Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx
index 24ce80f0a0b..86d70048b65 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx
@@ -78,6 +78,7 @@ export function FallbackGroupConfig({
           value={group.primaryModel}
           onChange={handlePrimaryChange}
           showSearch
+          getPopupContainer={(trigger) => trigger.parentElement || document.body}
           filterOption={(input, option) =>
             (option?.label ?? "").toLowerCase().includes(input.toLowerCase())
           }
@@ -125,6 +126,7 @@ export function FallbackGroupConfig({
               value={group.fallbackModels}
               onChange={handleFallbackSelect}
               disabled={!group.primaryModel}
+              getPopupContainer={(trigger) => trigger.parentElement || document.body}
               options={availableFallbackOptions.map((m) => ({
                 label: m,
                 value: m,