chore(cmdk): Resolve default option selection issue in GotoAnything component (#23878) (#23813)

web/app/components/goto-anything/index.tsx

@@ -32,7 +32,7 @@ const GotoAnything: FC<Props> = ({
   const { t } = useTranslation()
   const [show, setShow] = useState<boolean>(false)
   const [searchQuery, setSearchQuery] = useState<string>('')
-  const [cmdVal, setCmdVal] = useState<string>('')
+  const [cmdVal, setCmdVal] = useState<string>('_')
   const inputRef = useRef<HTMLInputElement>(null)
   const handleNavSearch = useCallback((q: string) => {
     setShow(true)
@@ -120,9 +120,14 @@ const GotoAnything: FC<Props> = ({
     },
   )
 
+  // Prevent automatic selection of the first option when cmdVal is not set
+  const clearSelection = () => {
+    setCmdVal('_')
+  }
+
   const handleCommandSelect = useCallback((commandKey: string) => {
     setSearchQuery(`${commandKey} `)
-    setCmdVal('')
+    clearSelection()
     setTimeout(() => {
       inputRef.current?.focus()
     }, 0)
@@ -233,9 +238,6 @@ const GotoAnything: FC<Props> = ({
         inputRef.current?.focus()
       })
     }
-    return () => {
-      setCmdVal('')
-    }
   }, [show])
 
   return (
@@ -245,6 +247,7 @@ const GotoAnything: FC<Props> = ({
         onClose={() => {
           setShow(false)
           setSearchQuery('')
+          clearSelection()
           onHide?.()
         }}
         closable={false}
@@ -268,7 +271,7 @@ const GotoAnything: FC<Props> = ({
                   onChange={(e) => {
                     setSearchQuery(e.target.value)
                     if (!e.target.value.startsWith('@'))
-                      setCmdVal('')
+                      clearSelection()
                   }}
                   className='flex-1 !border-0 !bg-transparent !shadow-none'
                   wrapperClassName='flex-1 !border-0 !bg-transparent'
@@ -334,7 +337,7 @@ const GotoAnything: FC<Props> = ({
                           <Command.Item
                             key={`${result.type}-${result.id}`}
                             value={result.title}
-                          className='flex cursor-pointer items-center gap-3 rounded-md p-3 will-change-[background-color] hover:bg-state-base-hover aria-[selected=true]:bg-state-base-hover-alt data-[selected=true]:bg-state-base-hover-alt'
+                            className='flex cursor-pointer items-center gap-3 rounded-md p-3 will-change-[background-color] aria-[selected=true]:bg-state-base-hover data-[selected=true]:bg-state-base-hover'
                             onSelect={() => handleNavigate(result)}
                           >
                             {result.icon}
@@ -373,7 +376,7 @@ const GotoAnything: FC<Props> = ({
                         {t('app.gotoAnything.resultCount', { count: searchResults.length })}
                         {searchMode !== 'general' && (
                           <span className='ml-2 opacity-60'>
-{t('app.gotoAnything.inScope', { scope: searchMode.replace('@', '') })}
+                            {t('app.gotoAnything.inScope', { scope: searchMode.replace('@', '') })}
                           </span>
                         )}
                       </>