Refactor auto-selection logic in useAutoSelectLatestChild to improve parent handling and prevent redundant selections

Author: ashrafchowdury

web/packages/agenta-entity-ui/src/selection/components/UnifiedEntityPicker/variants/PopoverCascaderVariant.tsx

@@ -16,7 +16,7 @@
 
 import React, {useCallback, useEffect, useMemo, useRef, useState, type CSSProperties} from "react"
 
-import {cn} from "@agenta/ui"
+import {bgColors, cn} from "@agenta/ui"
 import {EntityListItem, SearchInput} from "@agenta/ui/components/selection"
 import {CaretDown, Plus, X} from "@phosphor-icons/react"
 import {Button, Checkbox, Empty, Popover, Spin, Tabs} from "antd"
@@ -176,7 +176,7 @@ function ChildPanelContent({
                                     "flex items-center gap-2 px-2 py-1.5 rounded-md",
                                     isDisabled
                                         ? "opacity-50 cursor-not-allowed"
-                                        : "cursor-pointer hover:bg-[var(--ag-rgba-051729-04)]",
+                                        : cn("cursor-pointer", bgColors.hoverSubtle),
                                 )}
                                 onClick={() => {
                                     if (!isDisabled) onSelect(item)

web/packages/agenta-entity-ui/src/selection/hooks/modes/useListPopoverMode.ts

@@ -559,25 +559,21 @@ export function useAutoSelectLatestChild<TSelection = EntitySelectionResult>({
     onSelect,
     onComplete,
 }: UseAutoSelectLatestChildOptions<TSelection>): void {
-    const hasSelectedRef = useRef(false)
+    const handledParentIdRef = useRef<string | null>(null)
 
     // Fetch children
     const {items: children, query} = useChildrenData(childLevelConfig, parentId, true)
 
-    useEffect(() => {
-        hasSelectedRef.current = false
-    }, [parentId])
-
     // Auto-select first enabled child when loaded
     useEffect(() => {
-        if (hasSelectedRef.current || query.isPending) return
+        if (handledParentIdRef.current === parentId || query.isPending) return
 
         const firstChild = children.find(
             (child) => !disabledChildIds?.has(childLevelConfig.getId(child)),
         )
 
         if (firstChild) {
-            hasSelectedRef.current = true
+            handledParentIdRef.current = parentId
             const parentPathItem: SelectionPathItem = {
                 type: parentLevelConfig.type,
                 id: parentId,
@@ -598,7 +594,7 @@ export function useAutoSelectLatestChild<TSelection = EntitySelectionResult>({
         // settled, or when loaded children are all disabled.
         if (!query.isError && !query.isFetched && children.length === 0) return
 
-        hasSelectedRef.current = true
+        handledParentIdRef.current = parentId
         onComplete()
     }, [
         query.isPending,

web/packages/agenta-ui/src/components/selection/ListItem.tsx

@@ -173,7 +173,7 @@ export function ListItem({
                 "border-r-2 border-primary",
             )
           : isHovered
-            ? cn(bgColors.subtle, "cursor-pointer", textColors.primary)
+            ? cn(bgColors.subtle, bgColors.hoverState, "cursor-pointer", textColors.primary)
             : cn("cursor-pointer", bgColors.hoverSubtle, textColors.iconHover)
 
     return (

web/packages/agenta-ui/src/utils/styles.ts

@@ -175,7 +175,7 @@ export const bgColors = {
     /** Elevated background - colorBgElevated (#ffffff) */
     elevated: "bg-[var(--ag-c-FFFFFF)]",
     /** Hover subtle - for hover states on subtle backgrounds */
-    hoverSubtle: "hover:bg-zinc-1",
+    hoverSubtle: "hover:bg-zinc-1 dark:hover:bg-zinc-2",
 } as const
 
 /**