From c7084c04c0a9e2deff680b2282f720e0bc0aad13 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Fri, 14 Aug 2026 18:03:34 -0700
Subject: [PATCH] test(ui): assert which element the chips-combobox popup
 anchors to

The previous assertion read data-chips, which is derived from the anchor prop
being truthy, so it stayed true even when the ref never reached the DOM and the
popup was still anchored to the inner input.

Stub distinct widths on the chips container and the input, then read the width
the positioner resolved. Reverting the anchor wiring now reports the input's
width instead of the field's, which is the actual bug.
---
 .../components/shared/MultiSelect.test.tsx    | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/shared/MultiSelect.test.tsx b/ui/litellm-dashboard/src/components/shared/MultiSelect.test.tsx
index e35077756a5..908c22b5d67 100644
--- a/ui/litellm-dashboard/src/components/shared/MultiSelect.test.tsx
+++ b/ui/litellm-dashboard/src/components/shared/MultiSelect.test.tsx
@@ -23,13 +23,34 @@ const openPopup = async (input: HTMLElement) => {
   });
 };
 
+const stubWidth = (element: Element, width: number) =>
+  vi.spyOn(element, "getBoundingClientRect").mockReturnValue({
+    width,
+    height: 32,
+    top: 0,
+    left: 0,
+    right: width,
+    bottom: 32,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  } as DOMRect);
+
+const CHIPS_WIDTH = 300;
+const INPUT_WIDTH = 200;
+
 describe("MultiSelect", () => {
   it("anchors the popup to the chips container rather than the inner input", async () => {
     const { input } = renderMultiSelect();
+    const chips = input.closest("[data-slot='combobox-chips']");
+    expect(chips).not.toBeNull();
+    stubWidth(chips as Element, CHIPS_WIDTH);
+    stubWidth(input, INPUT_WIDTH);
 
     const popup = await openPopup(input);
+    const positioner = popup.parentElement as HTMLElement;
 
-    expect(popup).toHaveAttribute("data-chips", "true");
+    expect(positioner.style.getPropertyValue("--anchor-width")).toBe(`${CHIPS_WIDTH}px`);
   });
 
   it("reports the selected option values", async () => {