From 5fb01b5c7a13ba1ffc4242ffe15d11b10d271039 Mon Sep 17 00:00:00 2001
From: Betty Alagwu <94234459+betty-alagwu@users.noreply.github.com>
Date: Sat, 31 Dec 2022 07:54:04 +0800
Subject: [PATCH] Desktop: Fixes #7520: Search field doesn't get focus when
 pressing Ctrl+F (#7529)

---
 .../app-desktop/gui/NoteEditor/NoteEditor.tsx     |  2 +-
 .../gui/NoteEditor/commands/showLocalSearch.ts    |  7 +++++--
 .../gui/NoteEditor/utils/useNoteSearchBar.ts      | 15 +++++++++++++--
 packages/app-desktop/gui/NoteSearchBar.jsx        |  1 +
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx b/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx
index 816d6f99d..40c28c06e 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 2a02e2f8b..c5302faec 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 c9552aa35..fcd2cfc9f 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<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.
diff --git a/packages/app-desktop/gui/NoteSearchBar.jsx b/packages/app-desktop/gui/NoteSearchBar.jsx
index c9bf2b02d..00be6f048 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;
 	}