fix: fallback popup model dropdown z-index issue

[gambletan]

Summary

Fixes #17895 — model dropdowns in the "Add Fallbacks" modal were rendering behind the modal overlay.

• Added getPopupContainer prop to both Select components in FallbackGroupConfig.tsx so Ant Design renders the dropdown popup within the parent element instead of document.body, inheriting the modal's stacking context.

Root Cause

Ant Design's Select component portals its dropdown to document.body by default. When used inside a Modal (which has z-index: 1000), the dropdown can appear behind the modal overlay because it doesn't inherit the modal's z-index stacking context.

Fix

Set getPopupContainer={(trigger) => trigger.parentElement || document.body} on both Select components (primary model and fallback chain selectors) in FallbackGroupConfig.tsx. This is the standard Ant Design pattern for Select components inside modals.

Test plan

• Open the Add Fallbacks modal
• Click the Primary Model dropdown — it should render above the modal
• Click the Fallback Chain dropdown — it should render above the modal
• Verify search/filter still works in both dropdowns

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
litellm	Ready	Preview, Comment	Mar 13, 2026 5:36am

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[greptile-apps]

Greptile Summary

This PR applies a targeted, two-line fix to FallbackGroupConfig.tsx to resolve dropdown menus in the "Add Fallbacks" modal rendering behind the modal overlay. By setting getPopupContainer={(trigger) => trigger.parentElement || document.body} on both Select components (primary model selector and fallback-chain multi-selector), Ant Design renders the popup within the nearest parent element instead of portalling it to document.body, thereby inheriting the modal's stacking context.

Key changes:

• Added getPopupContainer to the primary-model Select (line 81)
• Added getPopupContainer to the fallback-chain multi-Select (line 129)
• Both fallback to document.body when parentElement is null, which is safe

Notes:

• The parent containers (<div className="relative"> and <div className="mb-4">) have no overflow: hidden or fixed-height constraints, so the dropdown will not be clipped by the chosen container.
• No automated tests are included, which is typical for a rendering/z-index fix, but the test plan items in the PR description remain unchecked — manual verification is recommended before merging.

Confidence Score: 5/5

• This PR is safe to merge — it is a minimal, well-targeted UI fix with no logic or API changes.
• Only two lines are added, both follow the documented Ant Design pattern for fixing Select dropdown z-index inside modals. The || document.body fallback prevents null-reference errors, and neither parent container introduces overflow clipping. No backend, state management, or breaking changes are present.
• No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx	Added getPopupContainer prop to both Select components to fix dropdown z-index issue inside a Modal; the fix correctly uses `trigger.parentElement

Sequence Diagram

sequenceDiagram
    participant User
    participant Modal
    participant FallbackGroupConfig
    participant Select
    participant Popup

    User->>Modal: Opens "Add Fallbacks" modal
    Modal->>FallbackGroupConfig: Renders component
    FallbackGroupConfig->>Select: Renders (with getPopupContainer)
    User->>Select: Clicks dropdown trigger
    Select->>Select: Calls getPopupContainer(trigger)
    alt trigger.parentElement exists
        Select->>Popup: Mounts dropdown inside trigger.parentElement
        Note over Popup: Inherits modal stacking context → renders above overlay
    else trigger.parentElement is null
        Select->>Popup: Mounts dropdown in document.body (fallback)
    end
    Popup-->>User: Dropdown visible above modal overlay

Loading

_{Last reviewed commit: 854f9f3}