fix(react/dialogs): recent notes not triggered in autocomplete

apps/client/src/services/note_autocomplete.ts

@@ -452,6 +452,21 @@ function init() {
     };
 }
 
+/**
+ * Convenience function which triggers the display of recent notes in the autocomplete input and focuses it.
+ *
+ * @param inputElement - The input element to trigger recent notes on.
+ */
+export function triggerRecentNotes(inputElement: HTMLInputElement | null | undefined) {
+    if (!inputElement) {
+        return;
+    }
+
+    const $el = $(inputElement);
+    showRecentNotes($el);
+    $el.trigger("focus").trigger("select");
+}
+
 export default {
     autocompleteSourceForCKEditor,
     initNoteAutocomplete,

apps/client/src/widgets/dialogs/clone_to.tsx

@@ -9,7 +9,7 @@ import froca from "../../services/froca";
 import FormGroup from "../react/FormGroup";
 import FormTextBox from "../react/FormTextBox";
 import Button from "../react/Button";
-import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
+import { Suggestion, triggerRecentNotes } from "../../services/note_autocomplete";
 import { logError } from "../../services/ws";
 import tree from "../../services/tree";
 import branches from "../../services/branches";
@@ -44,10 +44,7 @@ function CloneToDialogComponent({ clonedNoteIds }: CloneToDialogProps) {
             size="lg"
             footer={<Button text={t("clone_to.clone_to_selected_note")} keyboardShortcut="Enter" />}
             onSubmit={onSubmit}
-            onShown={() => {
-                autoCompleteRef.current?.focus();
-                note_autocomplete.showRecentNotes($(autoCompleteRef.current));
-            }}
+            onShown={() => triggerRecentNotes(autoCompleteRef.current)}
         >
             <h5>{t("clone_to.notes_to_clone")}</h5>
             <NoteList style={{ maxHeight: "200px", overflow: "auto" }} noteIds={clonedNoteIds} />

apps/client/src/widgets/dialogs/include_note.tsx

@@ -8,7 +8,7 @@ import Modal from "../react/Modal";
 import NoteAutocomplete from "../react/NoteAutocomplete";
 import ReactBasicWidget from "../react/ReactBasicWidget";
 import Button from "../react/Button";
-import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
+import { Suggestion, triggerRecentNotes } from "../../services/note_autocomplete";
 import tree from "../../services/tree";
 import froca from "../../services/froca";
 import EditableTextTypeWidget from "../type_widgets/editable_text";
@@ -20,17 +20,14 @@ interface IncludeNoteDialogProps {
 function IncludeNoteDialogComponent({ textTypeWidget }: IncludeNoteDialogProps) {
     const [suggestion, setSuggestion] = useState<Suggestion | null>(null);
     const [boxSize, setBoxSize] = useState("medium");
-    const inputRef = useRef<HTMLInputElement>(null);
+    const autoCompleteRef = useRef<HTMLInputElement>(null);
 
     return (textTypeWidget &&
         <Modal
             className="include-note-dialog"
             title={t("include_note.dialog_title")}
             size="lg"
-            onShown={() => {
-                inputRef.current?.focus();
-                note_autocomplete.showRecentNotes($(inputRef.current!));
-            }}
+            onShown={() => triggerRecentNotes(autoCompleteRef.current)}
             onSubmit={() => {
                 if (!suggestion?.notePath) {
                     return;
@@ -47,7 +44,7 @@ function IncludeNoteDialogComponent({ textTypeWidget }: IncludeNoteDialogProps)
                 <NoteAutocomplete
                     placeholder={t("include_note.placeholder_search")}
                     onChange={setSuggestion}
-                    inputRef={inputRef}
+                    inputRef={autoCompleteRef}
                 />
             </FormGroup>
 

apps/client/src/widgets/dialogs/move_to.tsx

@@ -8,7 +8,7 @@ import FormGroup from "../react/FormGroup";
 import NoteAutocomplete from "../react/NoteAutocomplete";
 import Button from "../react/Button";
 import { useRef, useState } from "preact/compat";
-import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
+import { Suggestion, triggerRecentNotes } from "../../services/note_autocomplete";
 import tree from "../../services/tree";
 import froca from "../../services/froca";
 import branches from "../../services/branches";
@@ -48,10 +48,7 @@ function MoveToDialogComponent({ movedBranchIds }: MoveToDialogProps) {
             title={t("move_to.dialog_title")}
             footer={<Button text={t("move_to.move_button")} keyboardShortcut="Enter" />}
             onSubmit={onSubmit}
-            onShown={() => {
-                autoCompleteRef.current?.focus();
-                note_autocomplete.showRecentNotes($(autoCompleteRef.current));
-            }}
+            onShown={() => triggerRecentNotes(autoCompleteRef.current)}
         >
             <h5>{t("move_to.notes_to_move")}</h5>
             <NoteList branchIds={movedBranchIds} />