From 0ae621439db244b58c9188735e5920fa10a1404c Mon Sep 17 00:00:00 2001 From: Betty Alagwu Date: Sat, 24 Dec 2022 11:00:26 +0800 Subject: [PATCH 1/2] fix: add useEffect to auto focus search bar when it is opened --- .../app-desktop/gui/NoteEditor/NoteEditor.tsx | 2 +- .../gui/NoteEditor/commands/showLocalSearch.ts | 1 - .../gui/NoteEditor/utils/useNoteSearchBar.ts | 15 +++++++++++++-- packages/app-desktop/gui/NoteSearchBar.jsx | 1 + 4 files changed, 15 insertions(+), 4 deletions(-) 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..d9112691fe3 100644 --- a/packages/app-desktop/gui/NoteEditor/commands/showLocalSearch.ts +++ b/packages/app-desktop/gui/NoteEditor/commands/showLocalSearch.ts @@ -13,7 +13,6 @@ export const runtime = (comp: any): CommandRuntime => { comp.editorRef.current.execCommand({ name: 'search' }); } else { comp.setShowLocalSearch(true); - if (comp.noteSearchBarRef.current) comp.noteSearchBarRef.current.wrappedInstance.focus(); } }, 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; } From f2caa4189838a705a0ed8ea92b8ebf57439eec0a Mon Sep 17 00:00:00 2001 From: Betty Alagwu Date: Mon, 26 Dec 2022 08:38:46 +0800 Subject: [PATCH 2/2] fix: focus when search bar is already open --- .../app-desktop/gui/NoteEditor/commands/showLocalSearch.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/app-desktop/gui/NoteEditor/commands/showLocalSearch.ts b/packages/app-desktop/gui/NoteEditor/commands/showLocalSearch.ts index d9112691fe3..c5302faec03 100644 --- a/packages/app-desktop/gui/NoteEditor/commands/showLocalSearch.ts +++ b/packages/app-desktop/gui/NoteEditor/commands/showLocalSearch.ts @@ -12,7 +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.focus(); + } else { + comp.setShowLocalSearch(true); + } } }, enabledCondition: 'oneNoteSelected',