fix selected repo disappearing in pen repository dropdown (#12702)

Co-authored-by: Tim O'Farrell <tofarr@gmail.com>

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");
+      });
+    });
   });
 });

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({
         />
 
         <div className="absolute right-1 top-1/2 transform -translate-y-1/2 flex items-center">
-          {selectedRepository && (
+          {effectiveSelectedRepository && (
             <ClearButton disabled={disabled} onClear={handleClear} />
           )}