return focus to the previously focused element after closing the dialog, fixes #861

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.40.1",
+  "version": "0.40.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/public/javascripts/dialogs/about.js

@@ -10,8 +10,6 @@ const $buildRevision = $("#build-revision");
 const $dataDirectory = $("#data-directory");
 
 export async function showDialog() {
-    utils.closeActiveDialog();
-
     const appInfo = await server.get('app-info');
 
     $appVersion.text(appInfo.appVersion);
@@ -22,7 +20,5 @@ export async function showDialog() {
     $buildRevision.attr('href', 'https://github.com/zadam/trilium/commit/' + appInfo.buildRevision);
     $dataDirectory.text(appInfo.dataDirectory);
 
-    glob.activeDialog = $dialog;
+    utils.openDialog($dialog);
-
-    $dialog.modal();
 }

src/public/javascripts/dialogs/add_link.js

@@ -11,13 +11,9 @@ const $linkTitle = $("#link-title");
 const $addLinkTitleFormGroup = $("#add-link-title-form-group");
 
 export async function showDialog() {
-    utils.closeActiveDialog();
-
     $addLinkTitleFormGroup.toggle(!hasSelection());
 
-    glob.activeDialog = $dialog;
+    utils.openDialog($dialog);
-
-    $dialog.modal();
 
     $autoComplete.val('').trigger('focus');
     $linkTitle.val('');

src/public/javascripts/dialogs/attributes.js

@@ -287,8 +287,6 @@ function initKoPlugins() {
 }
 
 export async function showDialog() {
-    utils.closeActiveDialog();
-
     await libraryLoader.requireLibrary(libraryLoader.KNOCKOUT);
 
     // lazily apply bindings on first use
@@ -300,11 +298,9 @@ export async function showDialog() {
         ko.applyBindings(attributesModel, $dialog[0]);
     }
 
-    glob.activeDialog = $dialog;
-
     await attributesModel.loadAttributes();
 
-    $dialog.modal();
+    utils.openDialog($dialog);
 }
 
 $dialog.on('focus', '.attribute-name', function (e) {

src/public/javascripts/dialogs/backend_log.js

@@ -6,11 +6,7 @@ const $backendLogTextArea = $("#backend-log-textarea");
 const $refreshBackendLog = $("#refresh-backend-log-button");
 
 export async function showDialog() {
-    utils.closeActiveDialog();
+    utils.openDialog($dialog);
-
-    glob.activeDialog = $dialog;
-
-    $dialog.modal();
 
     load();
 }

src/public/javascripts/dialogs/branch_prefix.js

@@ -13,10 +13,6 @@ const $noteTitle = $('#branch-prefix-note-title');
 let branchId;
 
 export async function showDialog(node) {
-    utils.closeActiveDialog();
-
-    glob.activeDialog = $dialog;
-
     branchId = node.data.branchId;
     const branch = treeCache.getBranch(branchId);
 
@@ -30,7 +26,7 @@ export async function showDialog(node) {
         return;
     }
 
-    $dialog.modal();
+    utils.openDialog($dialog);
 
     $treePrefixInput.val(branch.prefix);
 

src/public/javascripts/dialogs/clone_to.js

@@ -22,11 +22,7 @@ export async function showDialog(noteIds) {
         }
     }
 
-    utils.closeActiveDialog();
+    utils.openDialog($dialog);
-
-    glob.activeDialog = $dialog;
-
-    $dialog.modal();
 
     $noteAutoComplete.val('').trigger('focus');
 

src/public/javascripts/dialogs/export.js

@@ -17,8 +17,6 @@ let taskId = '';
 let branchId = null;
 
 export async function showDialog(node, defaultType) {
-    utils.closeActiveDialog();
-
     // each opening of the dialog resets the taskId so we don't associate it with previous exports anymore
     taskId = '';
     $exportButton.removeAttr("disabled");
@@ -38,9 +36,7 @@ export async function showDialog(node, defaultType) {
 
     $("#opml-v2").prop("checked", true); // setting default
 
-    glob.activeDialog = $dialog;
+    utils.openDialog($dialog);
-
-    $dialog.modal();
 
     branchId = node.data.branchId;
 

src/public/javascripts/dialogs/help.js

@@ -3,9 +3,5 @@ import utils from "../services/utils.js";
 const $dialog = $("#help-dialog");
 
 export async function showDialog() {
-    utils.closeActiveDialog();
+    utils.openDialog($dialog);
-
-    glob.activeDialog = $dialog;
-
-    $dialog.modal();
 }

src/public/javascripts/dialogs/import.js

@@ -16,8 +16,6 @@ const $explodeArchivesCheckbox = $("#explode-archives-checkbox");
 let parentNoteId = null;
 
 export async function showDialog(node) {
-    utils.closeActiveDialog();
-
     $fileUploadInput.val('').trigger('change'); // to trigger Import button disabling listener below
 
     $safeImportCheckbox.prop("checked", true);
@@ -26,13 +24,11 @@ export async function showDialog(node) {
     $codeImportedAsCodeCheckbox.prop("checked", true);
     $explodeArchivesCheckbox.prop("checked", true);
 
-    glob.activeDialog = $dialog;
-
     parentNoteId = node.data.noteId;
 
     $noteTitle.text(await treeUtils.getNoteTitle(parentNoteId));
 
-    $dialog.modal();
+    utils.openDialog($dialog);
 }
 
 $form.on('submit', () => {

src/public/javascripts/dialogs/include_note.js

@@ -10,13 +10,9 @@ let callback = null;
 export async function showDialog(cb) {
     callback = cb;
 
-    utils.closeActiveDialog();
-
-    glob.activeDialog = $dialog;
-
     $autoComplete.val('');
 
-    $dialog.modal();
+    utils.openDialog($dialog);
 
     noteAutocompleteService.initNoteAutocomplete($autoComplete, { hideGoToSelectedNoteButton: true });
     noteAutocompleteService.showRecentNotes($autoComplete);

src/public/javascripts/dialogs/info.js

@@ -10,13 +10,9 @@ let $originallyFocused; // element focused before the dialog was opened so we ca
 export function info(message) {
     $originallyFocused = $(':focus');
 
-    utils.closeActiveDialog();
-
-    glob.activeDialog = $dialog;
-
     $infoContent.text(message);
 
-    $dialog.modal();
+    utils.openDialog($dialog);
 
     return new Promise((res, rej) => { resolve = res; });
 }

src/public/javascripts/dialogs/jump_to_note.js

@@ -8,13 +8,9 @@ const $autoComplete = $("#jump-to-note-autocomplete");
 const $showInFullTextButton = $("#show-in-full-text-button");
 
 export async function showDialog() {
-    utils.closeActiveDialog();
-
-    glob.activeDialog = $dialog;
-
     $autoComplete.val('');
 
-    $dialog.modal();
+    utils.openDialog($dialog);
 
     noteAutocompleteService.initNoteAutocomplete($autoComplete, { hideGoToSelectedNoteButton: true })
         .on('autocomplete:selected', function(event, suggestion, dataset) {

src/public/javascripts/dialogs/link_map.js

@@ -16,10 +16,6 @@ function getOptions() {
 }
 
 export async function showDialog() {
-    utils.closeActiveDialog();
-
-    glob.activeDialog = $dialog;
-
     // set default settings
     $maxNotesInput.val(20);
 
@@ -27,7 +23,7 @@ export async function showDialog() {
 
     $linkMapContainer.empty();
 
-    $dialog.modal();
+    utils.openDialog($dialog);
 }
 
 $dialog.on('shown.bs.modal', () => {

src/public/javascripts/dialogs/markdown_import.js

@@ -37,9 +37,7 @@ export async function importMarkdownInline() {
         convertMarkdownToHtml(text);
     }
     else {
-        glob.activeDialog = $dialog;
+        utils.openDialog($dialog);
-
-        $dialog.modal();
     }
 }
 

src/public/javascripts/dialogs/move_to.js

@@ -1,7 +1,5 @@
 import noteAutocompleteService from "../services/note_autocomplete.js";
 import utils from "../services/utils.js";
-import cloningService from "../services/cloning.js";
-import treeUtils from "../services/tree_utils.js";
 import toastService from "../services/toast.js";
 import treeCache from "../services/tree_cache.js";
 import treeChangesService from "../services/branches.js";
@@ -18,11 +16,7 @@ let movedNodes;
 export async function showDialog(nodes) {
     movedNodes = nodes;
 
-    utils.closeActiveDialog();
+    utils.openDialog($dialog);
-
-    glob.activeDialog = $dialog;
-
-    $dialog.modal();
 
     $noteAutoComplete.val('').trigger('focus');
 

src/public/javascripts/dialogs/note_info.js

@@ -10,11 +10,7 @@ const $mime = $("#note-info-mime");
 const $okButton = $("#note-info-ok-button");
 
 export function showDialog() {
-    utils.closeActiveDialog();
+    utils.openDialog($dialog);
-
-    glob.activeDialog = $dialog;
-
-    $dialog.modal();
 
     const activeNote = noteDetailService.getActiveTabNote();
 

src/public/javascripts/dialogs/note_revisions.js

@@ -29,11 +29,7 @@ export async function showCurrentNoteRevisions() {
 }
 
 export async function showNoteRevisionsDialog(noteId, noteRevisionId) {
-    utils.closeActiveDialog();
+    utils.openDialog($dialog);
-
-    glob.activeDialog = $dialog;
-
-    $dialog.modal();
 
     await loadNoteRevisions(noteId, noteRevisionId);
 }

src/public/javascripts/dialogs/note_source.js

@@ -5,11 +5,7 @@ const $dialog = $("#note-source-dialog");
 const $noteSource = $("#note-source");
 
 export function showDialog() {
-    utils.closeActiveDialog();
+    utils.openDialog($dialog);
-
-    glob.activeDialog = $dialog;
-
-    $dialog.modal();
 
     const noteText = noteDetailService.getActiveTabNote().content;
 

src/public/javascripts/dialogs/options.js

@@ -6,13 +6,9 @@ import utils from "../services/utils.js";
 const $dialog = $("#options-dialog");
 
 export async function showDialog() {
-    utils.closeActiveDialog();
-
-    glob.activeDialog = $dialog;
-
     const options = await server.get('options');
 
-    $dialog.modal();
+    utils.openDialog($dialog);
 
     (await Promise.all([
         import('./options/advanced.js'),

src/public/javascripts/dialogs/prompt.js

@@ -12,10 +12,6 @@ let resolve;
 let shownCb;
 
 export function ask({ message, defaultValue, shown }) {
-    utils.closeActiveDialog();
-
-    glob.activeDialog = $dialog;
-
     shownCb = shown;
 
     $question = $("<label>")
@@ -34,7 +30,7 @@ export function ask({ message, defaultValue, shown }) {
             .append($question)
             .append($answer));
 
-    $dialog.modal();
+    utils.openDialog($dialog);
 
     return new Promise((res, rej) => { resolve = res; });
 }

src/public/javascripts/dialogs/protected_session.js

@@ -1,11 +1,12 @@
 import protectedSessionService from "../services/protected_session.js";
+import utils from "../services/utils.js";
 
 const $dialog = $("#protected-session-password-dialog");
 const $passwordForm = $dialog.find(".protected-session-password-form");
 const $passwordInput = $dialog.find(".protected-session-password");
 
 export function show() {
-    $dialog.modal();
+    utils.openDialog($dialog);
 
     $passwordInput.trigger('focus');
 }

src/public/javascripts/dialogs/recent_changes.js

@@ -8,11 +8,7 @@ const $dialog = $("#recent-changes-dialog");
 const $content = $("#recent-changes-content");
 
 export async function showDialog() {
-    utils.closeActiveDialog();
+    utils.openDialog($dialog);
-
-    glob.activeDialog = $dialog;
-
-    $dialog.modal();
 
     const result = await server.get('recent-changes');
 

src/public/javascripts/dialogs/sql_console.js

@@ -14,13 +14,9 @@ let codeEditor;
 $dialog.on("shown.bs.modal", e => initEditor());
 
 export async function showDialog() {
-    utils.closeActiveDialog();
-
-    glob.activeDialog = $dialog;
-
     await showTableSchemas();
 
-    $dialog.modal();
+    utils.openDialog($dialog);
 }
 
 async function initEditor() {

src/public/javascripts/services/search_notes.js

@@ -2,6 +2,7 @@ import treeService from './tree.js';
 import treeCache from "./tree_cache.js";
 import server from './server.js';
 import toastService from "./toast.js";
+import utils from "./utils.js";
 
 const $searchInput = $("input[name='search-text']");
 const $resetSearchButton = $("#reset-search-button");
@@ -28,6 +29,8 @@ const helpText = `
 </p>`;
 
 function showSearch() {
+    utils.saveFocusedElement();
+
     $searchBox.slideDown();
 
     $searchBox.tooltip({
@@ -49,6 +52,8 @@ function hideSearch() {
 
     $searchResults.hide();
     $searchBox.slideUp();
+
+    utils.focusSavedElement();
 }
 
 function toggleSearch() {

src/public/javascripts/services/utils.js

@@ -209,9 +209,50 @@ function getMimeTypeClass(mime) {
 function closeActiveDialog() {
     if (glob.activeDialog) {
         glob.activeDialog.modal('hide');
+        glob.activeDialog = null;
     }
 }
 
+let $lastFocusedElement = null;
+
+function saveFocusedElement() {
+    $lastFocusedElement = $(":focus");
+}
+
+function focusSavedElement() {
+    if (!$lastFocusedElement) {
+        return;
+    }
+
+    if ($lastFocusedElement.hasClass("ck")) {
+        // must handle CKEditor separately because of this bug: https://github.com/ckeditor/ckeditor5/issues/607
+
+        import("./note_detail.js").then(noteDetail => {
+            noteDetail.default.getActiveEditor().editing.view.focus();
+        });
+    } else {
+        $lastFocusedElement.focus();
+    }
+
+    $lastFocusedElement = null;
+}
+
+function openDialog($dialog) {
+    closeActiveDialog();
+
+    glob.activeDialog = $dialog;
+
+    saveFocusedElement();
+
+    $dialog.modal();
+
+    $dialog.on('hidden.bs.modal', () => {
+        if (!glob.activeDialog || glob.activeDialog === $dialog) {
+            focusSavedElement();
+        }
+    });
+}
+
 function isHtmlEmpty(html) {
     html = html.toLowerCase();
 
@@ -281,6 +322,9 @@ export default {
     getNoteTypeClass,
     getMimeTypeClass,
     closeActiveDialog,
+    openDialog,
+    saveFocusedElement,
+    focusSavedElement,
     isHtmlEmpty,
     clearBrowserCache,
     getUrlForDownload,