fix: Segmented Sidebar switch to search on value change

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/__tests__/sidebarSegmentedNav.test.tsx

@@ -137,9 +137,8 @@ describe("SidebarSegmentedNav", () => {
     expect(componentsButton).toHaveAttribute("data-active", "false");
   });
 
-  it("sets active state for search when search is focused", () => {
-    mockUseSidebar.activeSection = "components";
-    mockUseSearchContext.isSearchFocused = true;
+  it("sets active state for search when activeSection is search", () => {
+    mockUseSidebar.activeSection = "search";
     render(<SidebarSegmentedNav />);
 
     const searchButton = screen.getByTestId("sidebar-nav-search");

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarSegmentedNav.tsx

@@ -48,7 +48,7 @@ export const NAV_ITEMS: NavItem[] = [
 
 export default function SidebarSegmentedNav() {
   const { activeSection, setActiveSection, toggleSidebar, open } = useSidebar();
-  const { focusSearch, isSearchFocused, setSearch } = useSearchContext();
+  const { focusSearch, setSearch } = useSearchContext();
   return (
     <div className="flex h-full flex-col border-r border-border bg-background">
       <SidebarMenu className="gap-2 p-1">
@@ -73,14 +73,10 @@ export default function SidebarSegmentedNav() {
                     }
                   }
                 }}
-                isActive={
-                  activeSection === item.id ||
-                  (item.id === "search" && isSearchFocused)
-                }
+                isActive={activeSection === item.id}
                 className={cn(
                   "flex h-8 w-8 items-center justify-center rounded-md p-0 transition-all duration-200",
-                  activeSection === item.id ||
-                    (item.id === "search" && isSearchFocused)
+                  activeSection === item.id
                     ? "bg-accent text-accent-foreground"
                     : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
                 )}

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx

@@ -23,7 +23,7 @@ import { useGetMCPServers } from "@/controllers/API/queries/mcp/use-get-mcp-serv
 import { ENABLE_NEW_SIDEBAR } from "@/customization/feature-flags";
 import { useAddComponent } from "@/hooks/use-add-component";
 import { useShortcutsStore } from "@/stores/shortcuts";
-import { getLocalStorage, setLocalStorage } from "@/utils/local-storage-util";
+import { setLocalStorage } from "@/utils/local-storage-util";
 import {
   nodeColors,
   SIDEBAR_BUNDLES,
@@ -76,12 +76,6 @@ export function useSearchContext() {
   return context;
 }
 
-interface SearchProviderProps {
-  children: React.ReactNode;
-  searchInputRef: React.RefObject<HTMLInputElement>;
-  isSearchFocused: boolean;
-}
-
 // Create a provider that can be used at the FlowPage level
 export function FlowSearchProvider({
   children,
@@ -180,9 +174,20 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
     isSearchFocused = false,
     handleInputFocus = () => {},
     handleInputBlur = () => {},
-    handleInputChange = () => {},
+    handleInputChange: originalHandleInputChange = () => {},
   } = context;
 
+  const handleInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      originalHandleInputChange(event);
+      // Set active section to search when user first enters text
+      if (event.target.value.length > 0 && search.length === 0) {
+        setActiveSection("search");
+      }
+    },
+    [originalHandleInputChange, search, setActiveSection],
+  );
+
   const showBetaStorage = getBooleanFromStorage("showBeta", true);
   const showLegacyStorage = getBooleanFromStorage("showLegacy", false);
 

src/frontend/tests/extended/features/loop-component.spec.ts

@@ -163,27 +163,13 @@ test(
 
     await page.getByTestId("canvas_controls_dropdown").click();
 
-    await zoomOut(page, 3);
+    await zoomOut(page, 2);
     await page.getByTestId("canvas_controls_dropdown").click();
 
     await page.getByTestId("div-generic-node").nth(5).click();
 
     await page.waitForTimeout(1000);
 
-    await page.waitForSelector('[data-testid="more-options-modal"]', {
-      timeout: 100000,
-    });
-
-    await page.getByTestId("more-options-modal").click();
-
-    await page.waitForTimeout(1000);
-
-    await page.waitForSelector('[data-testid="expand-button-modal"]', {
-      timeout: 100000,
-    });
-
-    await page.getByTestId("expand-button-modal").click();
-
     await page.getByTestId("input-list-plus-btn_urls-0").click();
 
     // Configure components
@@ -230,6 +216,8 @@ test(
       .click();
 
     // Build and run
+    await page.getByTestId("title-Chat Output").click();
+    await page.keyboard.press(`ControlOrMeta+.`);
     await page.getByTestId("button_run_chat output").click();
     await page.waitForSelector("text=built successfully", { timeout: 30000 });