From a36fdf6a7d031ef2b6514bfba00f566dcdc637d6 Mon Sep 17 00:00:00 2001
From: HyaCinth <88471803+HyaCiovo@users.noreply.github.com>
Date: Wed, 13 Aug 2025 17:14:21 +0800
Subject: [PATCH] chore(cmdk): Resolve default option selection issue in
 GotoAnything component (#23878) (#23813)

---
 web/app/components/goto-anything/index.tsx | 83 +++++++++++-----------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/web/app/components/goto-anything/index.tsx b/web/app/components/goto-anything/index.tsx
index bff0773a4..22e666154 100644
--- a/web/app/components/goto-anything/index.tsx
+++ b/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'
@@ -321,40 +324,40 @@ const GotoAnything: FC<Props> = ({
                     />
                   ) : (
                     Object.entries(groupedResults).map(([type, results], groupIndex) => (
-                    <Command.Group key={groupIndex} heading={(() => {
-                      const typeMap: Record<string, string> = {
-                        'app': 'app.gotoAnything.groups.apps',
-                        'plugin': 'app.gotoAnything.groups.plugins',
-                        'knowledge': 'app.gotoAnything.groups.knowledgeBases',
-                        'workflow-node': 'app.gotoAnything.groups.workflowNodes',
-                      }
-                      return t(typeMap[type] || `${type}s`)
-                    })()} className='p-2 capitalize text-text-secondary'>
-                      {results.map(result => (
-                        <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'
-                          onSelect={() => handleNavigate(result)}
-                        >
-                          {result.icon}
-                          <div className='min-w-0 flex-1'>
-                            <div className='truncate font-medium text-text-secondary'>
-                              {result.title}
-                            </div>
-                            {result.description && (
-                              <div className='mt-0.5 truncate text-xs text-text-quaternary'>
-                                {result.description}
+                      <Command.Group key={groupIndex} heading={(() => {
+                        const typeMap: Record<string, string> = {
+                          'app': 'app.gotoAnything.groups.apps',
+                          'plugin': 'app.gotoAnything.groups.plugins',
+                          'knowledge': 'app.gotoAnything.groups.knowledgeBases',
+                          'workflow-node': 'app.gotoAnything.groups.workflowNodes',
+                        }
+                        return t(typeMap[type] || `${type}s`)
+                      })()} className='p-2 capitalize text-text-secondary'>
+                        {results.map(result => (
+                          <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] aria-[selected=true]:bg-state-base-hover data-[selected=true]:bg-state-base-hover'
+                            onSelect={() => handleNavigate(result)}
+                          >
+                            {result.icon}
+                            <div className='min-w-0 flex-1'>
+                              <div className='truncate font-medium text-text-secondary'>
+                                {result.title}
                               </div>
-                            )}
-                          </div>
-                          <div className='text-xs capitalize text-text-quaternary'>
-                            {result.type}
-                          </div>
-                        </Command.Item>
-                      ))}
-                    </Command.Group>
-                  ))
+                              {result.description && (
+                                <div className='mt-0.5 truncate text-xs text-text-quaternary'>
+                                  {result.description}
+                                </div>
+                              )}
+                            </div>
+                            <div className='text-xs capitalize text-text-quaternary'>
+                              {result.type}
+                            </div>
+                          </Command.Item>
+                        ))}
+                      </Command.Group>
+                    ))
                   )}
                   {!isCommandsMode && emptyResult}
                   {!isCommandsMode && defaultUI}
@@ -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>
                         )}
                       </>