From 44cab08731a05e63d589602b77a177b9057615ef Mon Sep 17 00:00:00 2001
From: Bytechoreographer <Bytechoreographer@users.noreply.github.com>
Date: Sat, 9 May 2026 15:16:12 +0800
Subject: [PATCH] fix(ui): remove blank leading entry from access group model
 dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Allowed Models dropdown on the Access Groups create modal showed a
blank first row above the actual model list. The Special Options branch
of `ModelSelect`'s options array used a ternary that returned `[]` when
`includeSpecialOptions` was falsy, but the result was placed as a single
element of the outer array (not spread) — so antd's Select rendered the
empty array as a blank optgroup at the top. Switch to the same
`...(cond ? [{...}] : [])` spread pattern already used by the Wildcard
Options and Models branches.

No behavior change for callers that pass `includeSpecialOptions={true}`.

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
---
 .../ModelSelect/ModelSelect.test.tsx          | 15 +++++
 .../components/ModelSelect/ModelSelect.tsx    | 62 ++++++++++---------
 2 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.test.tsx b/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.test.tsx
index 6da2f82a2f1..a57b7e2095a 100644
--- a/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.test.tsx
+++ b/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.test.tsx
@@ -535,6 +535,21 @@ describe("ModelSelect", () => {
     });
   });
 
+  it("should not render an empty optgroup when includeSpecialOptions is omitted", async () => {
+    renderWithProviders(<ModelSelect onChange={mockOnChange} context="global" />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("model-select")).toBeInTheDocument();
+    });
+
+    const optgroups = document.querySelectorAll("optgroup");
+    // Wildcard Options + Models — no blank leading group
+    expect(optgroups.length).toBe(2);
+    optgroups.forEach((g) => {
+      expect(g.getAttribute("label")).toBeTruthy();
+    });
+  });
+
   it("should render maxTagPlaceholder when many items are selected", async () => {
     // Create many models to trigger maxTagCount responsive behavior
     const manyModels: ProxyModel[] = Array.from({ length: 20 }, (_, i) => ({
diff --git a/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx b/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx
index 74b2619f7f3..800fa86b165 100644
--- a/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx
+++ b/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx
@@ -141,36 +141,38 @@ export const ModelSelect = (props: ModelSelectProps) => {
       onChange={handleChange}
       style={style}
       options={[
-        includeSpecialOptions
-          ? {
-            label: <span>Special Options</span>,
-            title: "Special Options",
-            options: [
-              ...(shouldShowAllProxyModels
-                ? [
-                  {
-                    label: <span>All Proxy Models</span>,
-                    value: MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
-                    disabled:
-                      value.length > 0 &&
-                      value.some(
-                        (v) => isSpecialOption(v) && v !== MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
-                      ),
-                    key: MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
-                  },
-                ]
-                : []),
-              {
-                label: <span>No Default Models</span>,
-                value: MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value,
-                disabled:
-                  value.length > 0 &&
-                  value.some((v) => isSpecialOption(v) && v !== MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value),
-                key: MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value,
-              },
-            ],
-          }
-          : [],
+        ...(includeSpecialOptions
+          ? [
+            {
+              label: <span>Special Options</span>,
+              title: "Special Options",
+              options: [
+                ...(shouldShowAllProxyModels
+                  ? [
+                    {
+                      label: <span>All Proxy Models</span>,
+                      value: MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
+                      disabled:
+                        value.length > 0 &&
+                        value.some(
+                          (v) => isSpecialOption(v) && v !== MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
+                        ),
+                      key: MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
+                    },
+                  ]
+                  : []),
+                {
+                  label: <span>No Default Models</span>,
+                  value: MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value,
+                  disabled:
+                    value.length > 0 &&
+                    value.some((v) => isSpecialOption(v) && v !== MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value),
+                  key: MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value,
+                },
+              ],
+            },
+          ]
+          : []),
         ...(wildcard.length > 0
           ? [
             {