diff --git a/frontend/__tests__/components/features/home/git-repo-dropdown.test.tsx b/frontend/__tests__/components/features/home/git-repo-dropdown.test.tsx index f4d99e4fb5..77d43e871b 100644 --- a/frontend/__tests__/components/features/home/git-repo-dropdown.test.tsx +++ b/frontend/__tests__/components/features/home/git-repo-dropdown.test.tsx @@ -201,7 +201,7 @@ describe("GitRepoDropdown", () => { const selectedRepository = MOCK_REPOSITORIES[0]; renderDropdown( - { value: selectedRepository.full_name }, + { value: selectedRepository.id }, { selectedRepository }, ); @@ -230,5 +230,24 @@ describe("GitRepoDropdown", () => { expect(mockOnChange).toHaveBeenCalledWith(MOCK_REPOSITORIES[1]); }); + + it("should keep selected repo visible even if it's not in fetched results", async () => { + // selectedRepository from useRepositoryData stays null in our default mocks, + // which matches the real-world scenario where a recent repo isn't yet loaded. + renderDropdown(); + + const input = screen.getByTestId("git-repo-dropdown") as HTMLInputElement; + await userEvent.click(input); + + await waitFor(() => { + expect(screen.getByText("user/repo-two")).toBeInTheDocument(); + }); + + await userEvent.click(screen.getByText("user/repo-two")); + + await waitFor(() => { + expect(input.value).toBe("user/repo-two"); + }); + }); }); }); diff --git a/frontend/src/components/features/home/git-repo-dropdown/git-repo-dropdown.tsx b/frontend/src/components/features/home/git-repo-dropdown/git-repo-dropdown.tsx index d86277f96d..3cbe534e04 100644 --- a/frontend/src/components/features/home/git-repo-dropdown/git-repo-dropdown.tsx +++ b/frontend/src/components/features/home/git-repo-dropdown/git-repo-dropdown.tsx @@ -91,6 +91,13 @@ export function GitRepoDropdown({ repositoryName, ); + /** + * `selectedRepository` is derived from fetched/search results. A repo selected + * from "Most Recent" may not be present in those results yet, so use the + * locally selected item as a fallback to keep the UI stable. + */ + const effectiveSelectedRepository = selectedRepository ?? localSelectedItem; + // Get recent repositories filtered by provider and input keyword const recentRepositories = useMemo(() => { const allRecentRepos = storedRecentRepositories; @@ -233,12 +240,9 @@ export function GitRepoDropdown({ // Initialize input value when selectedRepository changes (but not when user is typing) useEffect(() => { - if (selectedRepository && !isOpen) { - setInputValue(selectedRepository.full_name); - } else if (!selectedRepository && !isOpen) { - setInputValue(""); - } - }, [selectedRepository, isOpen]); + if (isOpen) return; + setInputValue(effectiveSelectedRepository?.full_name ?? ""); + }, [effectiveSelectedRepository, isOpen]); const isLoadingState = isLoading || isSearchLoading || isFetchingNextPage || isUrlSearchLoading; @@ -344,7 +348,7 @@ export function GitRepoDropdown({ />
- {selectedRepository && ( + {effectiveSelectedRepository && ( )}