scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-10 03:28:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 85

fix(ui): highlight the first member search match so Enter picks it (#37429)

Browse source 
* fix(ui): highlight the first member search match so Enter picks it

Moving the modal off antd Form swapped antd Select for Base UI Combobox, which
highlights nothing until an arrow key moves the cursor. Typing an email and
pressing Enter therefore selected no one, and the form submitted anyway, so
/team/member_add went out with member.user_email undefined.

autoHighlight="always" restores the behaviour antd had. The Enter key still
does not submit the form, which the existing test continues to cover.

* fix(ui): keep the always-highlight prop past the type check

Combobox.Root re-declares autoHighlight as boolean while the AriaCombobox it
wraps types it as boolean | "always". Only "always" highlights a list this
component filters server-side, since the plain flag highlights on Base UI's own
filtering pass, which filter={null} turns off.

Verified with next build, the same type check that failed in CI.
This commit is contained in:
yuneng-jiang 2026-08-18 20:31:23 -07:00 • committed by GitHub
parent bcead282e2
commit c94d692864
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ui/litellm-dashboard/src/components/common_components/user_search_modal.test.tsx
View file

@ -161,6 +161,26 @@ describe("UserSearchModal submit payload", () => {
});
});
it("commits the first match when the typed search is confirmed with Enter", async () => {
const { user, onSubmit } = setup();
const input = getEmailSearchInput();
await user.click(input);
await user.type(input, "pick");
await waitFor(() => expect(userFilterUICall).toHaveBeenCalled(), { timeout: 3000 });
await screen.findByRole("option", { name: "picked@example.com" });
await user.keyboard("{Enter}");
await user.click(save());
await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
expect(onSubmit.mock.calls[0][0]).toStrictEqual({
user_email: "picked@example.com",
user_id: "u-1",
role: "user",
});
});
it("does not submit on Enter in any field, while the button still does", async () => {
const { user, onSubmit } = setup();

3
ui/litellm-dashboard/src/components/common_components/user_search_modal.tsx
View file

@ -165,6 +165,9 @@ const UserSearchModal: React.FC<UserSearchModalProps> = ({
<Combobox
items={items}
value={selected}
// @ts-expect-error TS2322 -- Combobox.Root narrows autoHighlight to boolean; the AriaCombobox it wraps
// accepts "always", the only value that highlights a list this component filters server-side
autoHighlight="always"
filter={null}
onValueChange={(option: UserOption | null) => {
controlProps.onChange(option?.value);