diff --git a/packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx b/packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx
index 9bf7f8d92..623c4225c 100644
--- a/packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx
+++ b/packages/web/src/javascripts/Components/ContentTableView/ContentTableView.tsx
@@ -128,7 +128,7 @@ const ItemLinksCell = ({ item }: { item: DecryptedItemInterface }) => {
align="start"
className="py-2"
>
-
+
>
)
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
index 4c3fa571d..054980890 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
@@ -36,7 +36,7 @@ const LinkedItemsButton = ({ linkingController, onClickPreprocessing }: Props) =
open={isLinkingPanelOpen}
className="pb-2"
>
-
+
>
)
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
index 46bc8f447..e766bf8cf 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
+++ b/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(() => {
- if (isOpen && searchInputRef.current) {
- searchInputRef.current.focus()
+ const focusInput = useCallback((element: HTMLInputElement | null) => {
+ if (element) {
+ 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 && (