diff --git a/frontend/src/components/modals/settings/AutocompleteCombobox.test.tsx b/frontend/src/components/modals/settings/AutocompleteCombobox.test.tsx index 108ac25871..43385a148d 100644 --- a/frontend/src/components/modals/settings/AutocompleteCombobox.test.tsx +++ b/frontend/src/components/modals/settings/AutocompleteCombobox.test.tsx @@ -64,5 +64,21 @@ describe("AutocompleteCombobox", () => { expect(onChangeMock).toHaveBeenCalledWith("model2"); }); + it("should set the input value to the default key if the default key is not in the list", () => { + render( + , + ); + + const modelInput = screen.getByRole("combobox", { name: "model" }); + + expect(modelInput).toHaveValue("m2"); + }); + it.todo("should show a tooltip after 0.5 seconds of focus"); }); diff --git a/frontend/src/components/modals/settings/AutocompleteCombobox.tsx b/frontend/src/components/modals/settings/AutocompleteCombobox.tsx index c4cdc7af17..01d5891b30 100644 --- a/frontend/src/components/modals/settings/AutocompleteCombobox.tsx +++ b/frontend/src/components/modals/settings/AutocompleteCombobox.tsx @@ -1,7 +1,7 @@ -import { I18nKey } from "#/i18n/declaration"; import { Autocomplete, AutocompleteItem, Tooltip } from "@nextui-org/react"; import React from "react"; import { useTranslation } from "react-i18next"; +import { I18nKey } from "#/i18n/declaration"; type Label = "model" | "agent" | "language"; @@ -58,7 +58,11 @@ export function AutocompleteCombobox({ label={t(LABELS[ariaLabel])} placeholder={t(PLACEHOLDERS[ariaLabel])} defaultItems={items} - defaultSelectedKey={defaultKey} + defaultInputValue={ + // Find the label for the default key, otherwise use the default key itself + // This is useful when the default key is not in the list of items, in the case of a custom LLM model + items.find((item) => item.value === defaultKey)?.label || defaultKey + } isDisabled={disabled} allowsCustomValue={allowCustomValue} onInputChange={(value) => {