diff --git a/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx b/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx index 816d6f99d5f..40c28c06efa 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx @@ -94,7 +94,7 @@ function NoteEditor(props: NoteEditorProps) { showLocalSearch, setShowLocalSearch, searchMarkers: localSearchMarkerOptions, - } = useNoteSearchBar(); + } = useNoteSearchBar({ noteSearchBarRef }); // If the note has been modified in another editor, wait for it to be saved // before loading it in this editor. diff --git a/packages/app-desktop/gui/NoteEditor/commands/showLocalSearch.ts b/packages/app-desktop/gui/NoteEditor/commands/showLocalSearch.ts index 2a02e2f8bdd..c5302faec03 100644 --- a/packages/app-desktop/gui/NoteEditor/commands/showLocalSearch.ts +++ b/packages/app-desktop/gui/NoteEditor/commands/showLocalSearch.ts @@ -12,8 +12,11 @@ export const runtime = (comp: any): CommandRuntime => { if (comp.editorRef.current && comp.editorRef.current.supportsCommand('search')) { comp.editorRef.current.execCommand({ name: 'search' }); } else { - comp.setShowLocalSearch(true); - if (comp.noteSearchBarRef.current) comp.noteSearchBarRef.current.wrappedInstance.focus(); + if (comp.noteSearchBarRef.current) { + comp.noteSearchBarRef.current.focus(); + } else { + comp.setShowLocalSearch(true); + } } }, enabledCondition: 'oneNoteSelected', diff --git a/packages/app-desktop/gui/NoteEditor/utils/useNoteSearchBar.ts b/packages/app-desktop/gui/NoteEditor/utils/useNoteSearchBar.ts index c9552aa3536..fcd2cfc9f7f 100644 --- a/packages/app-desktop/gui/NoteEditor/utils/useNoteSearchBar.ts +++ b/packages/app-desktop/gui/NoteEditor/utils/useNoteSearchBar.ts @@ -1,4 +1,4 @@ -import { useState, useCallback } from 'react'; +import { useState, useCallback, MutableRefObject, useEffect } from 'react'; import Logger from '@joplin/lib/Logger'; import { SearchMarkers } from './useSearchMarkers'; const CommandService = require('@joplin/lib/services/CommandService').default; @@ -25,10 +25,21 @@ function defaultLocalSearch(): LocalSearch { }; } -export default function useNoteSearchBar() { +export interface UseNoteSearchBarProps { + noteSearchBarRef: MutableRefObject; +} + +export default function useNoteSearchBar({ noteSearchBarRef }: UseNoteSearchBarProps) { const [showLocalSearch, setShowLocalSearch] = useState(false); const [localSearch, setLocalSearch] = useState(defaultLocalSearch()); + + useEffect(() => { + if (showLocalSearch && noteSearchBarRef.current) { + noteSearchBarRef.current.focus(); + } + }, [showLocalSearch, noteSearchBarRef]); + const onChange = useCallback((query: string) => { // A query that's too long would make CodeMirror throw an exception // which would crash the app. diff --git a/packages/app-desktop/gui/NoteSearchBar.jsx b/packages/app-desktop/gui/NoteSearchBar.jsx index c9bf2b02d97..00be6f048de 100644 --- a/packages/app-desktop/gui/NoteSearchBar.jsx +++ b/packages/app-desktop/gui/NoteSearchBar.jsx @@ -11,6 +11,7 @@ class NoteSearchBar extends React.Component { this.previousButton_click = this.previousButton_click.bind(this); this.nextButton_click = this.nextButton_click.bind(this); this.closeButton_click = this.closeButton_click.bind(this); + this.focus = this.focus.bind(this); this.backgroundColor = undefined; }