Desktop: Fixes #7520: Search field doesn't get focus when pressing Ctrl+F (#7529)

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.

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',

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<any>;
+}
+
+export default function useNoteSearchBar({ noteSearchBarRef }: UseNoteSearchBarProps) {
 	const [showLocalSearch, setShowLocalSearch] = useState(false);
 	const [localSearch, setLocalSearch] = useState<LocalSearch>(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.

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;
 	}