chore: fix linked items panel input focus

packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx

@@ -128,7 +128,7 @@ const ItemLinksCell = ({ item }: { item: DecryptedItemInterface }) => {
         align="start"
         className="py-2"
       >
-        <LinkedItemsPanel isOpen={contextMenuVisible} item={item} />
+        <LinkedItemsPanel item={item} />
       </Popover>
     </>
   )

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx

@@ -36,7 +36,7 @@ const LinkedItemsButton = ({ linkingController, onClickPreprocessing }: Props) =
         open={isLinkingPanelOpen}
         className="pb-2"
       >
-        <LinkedItemsPanel item={activeItem} isOpen={isLinkingPanelOpen} />
+        <LinkedItemsPanel item={activeItem} />
       </Popover>
     </>
   )

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx

@@ -2,7 +2,7 @@ import { FeatureName } from '@/Controllers/FeatureName'
 import { classNames } from '@standardnotes/utils'
 import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
 import { observer } from 'mobx-react-lite'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useApplication } from '../ApplicationProvider'
 import ClearInputButton from '../ClearInputButton/ClearInputButton'
 import Icon from '../Icon/Icon'
@@ -11,8 +11,9 @@ import LinkedItemSearchResults from './LinkedItemSearchResults'
 import { LinkedItemsSectionItem } from './LinkedItemsSectionItem'
 import { DecryptedItem } from '@standardnotes/snjs'
 import { useItemLinks } from '@/Hooks/useItemLinks'
+import { mergeRefs } from '@/Hooks/mergeRefs'
 
-const LinkedItemsPanel = ({ isOpen, item }: { isOpen: boolean; item: DecryptedItem }) => {
+const LinkedItemsPanel = ({ item }: { item: DecryptedItem }) => {
   const application = useApplication()
 
   const { linkItems, unlinkItems, activateItem, createAndAddNewTag, isEntitledToNoteLinking } =
@@ -28,11 +29,11 @@ const LinkedItemsPanel = ({ isOpen, item }: { isOpen: boolean; item: DecryptedIt
   const isSearching = !!searchQuery.length
   const { linkedResults, unlinkedItems, shouldShowCreateTag } = getLinkingSearchResults(searchQuery, application, item)
 
-  useEffect(() => {
+  const focusInput = useCallback((element: HTMLInputElement | null) => {
-    if (isOpen && searchInputRef.current) {
+    if (element) {
-      searchInputRef.current.focus()
+      element.focus()
     }
-  }, [isOpen])
+  }, [])
 
   const selectAndUploadFiles = async () => {
     if (!entitledToFiles) {
@@ -64,7 +65,7 @@ const LinkedItemsPanel = ({ isOpen, item }: { isOpen: boolean; item: DecryptedIt
           placeholder="Search items to link..."
           value={searchQuery}
           onChange={setSearchQuery}
-          ref={searchInputRef}
+          ref={mergeRefs([focusInput, searchInputRef])}
           right={[
             isSearching && (
               <ClearInputButton