From 854f9f3f1b2a4639fb5fbf60995a78556548f64d Mon Sep 17 00:00:00 2001
From: "Ethan T." <ethanchang32@gmail.com>
Date: Fri, 13 Mar 2026 13:34:06 +0800
Subject: [PATCH] fix: add getPopupContainer to Select components in fallback
 modal to fix z-index issue

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 24ce80f0a0..86d70048b6 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,