From 5f9e94353d1ab54092de6aaa37c26ff813527fda Mon Sep 17 00:00:00 2001 From: Albert Graef Date: Sat, 19 Sep 2020 09:22:45 +0200 Subject: [PATCH] Fix broken keyboard navigation in the help browser. This resolves a long-standing bug (the relevant code is 4-5 years old). While it is just one little missing check in the keyboard event handler, which is surely just an oversight, this has the dire consequence of breaking navigation with the Tab key. - The root cause for this issue is in the document.body event listener callback, where we always reset the focus to the search text input if there's *any* keyboard input (other than a LF or CR on the file browser and bookmark buttons) while the focus is on something else (such as an item in the toc or in the search results). The intention there surely was to enable the user to just start typing *anywhere* in the dialog, which is convenient, but has the unwanted side-effect of breaking Tab navigation (as well as the cursor keys). - The fix is simply to *not* reset the focus if the key event is the Tab key. Besides Tab, we also treat the modifier and cursor keys in the same fashion, so that these will be handled on the spot rather than being forwarded to the search text input. By these means, you can still start typing your search terms from anywhere in the dialog, but navigation with Tab and Shift+Tab and the cursor keys now also work as expected. - Also, why is the div holding the toc items created again and again for each item in display_toc()? I moved the corresponding statement, div = document.createElement("div"), right before the toc.forEach() loop now, which I think is where it really belongs. --- pd/nw/dialog_search.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/pd/nw/dialog_search.html b/pd/nw/dialog_search.html index 4c72e35fc..6c9d292a7 100644 --- a/pd/nw/dialog_search.html +++ b/pd/nw/dialog_search.html @@ -372,8 +372,8 @@ current_dir = path.join(pdgui.get_lib_dir(), "doc"); toc_bookmark_update(current_dir); toc_bookmark_status(false); + div = document.createElement("div"); toc.forEach(function(doc, i, a) { - div = document.createElement("div"); if (doc.id) { try { fs.accessSync(check_dir(doc.id), fs.F_OK); @@ -700,6 +700,15 @@ do_bookmark(dir, toc_is_bookmarked(id)); } +function is_special_key(key) +{ + // determine all special keys which should be handled on the spot and + // *not* be forwarded to the search text field + return key === 9 // tab key + || (key >= 16 && key <= 18) // modifier (shift, ctrl, alt) + || (key >= 33 && key <= 40); // cursor keys +} + function add_events() { // closing the Window nw.Window.get().on("close", function() { @@ -755,6 +764,7 @@ } else if ((evt.target === button_elem || evt.target === button_elem2) && evt.keyCode === 10 || evt.keyCode === 13) { + } else if (is_special_key(evt.keyCode)) { } else if (evt.target !== input_elem) { input_elem.focus(); } else if (bookmark_shortcut(evt)) { @@ -887,7 +897,7 @@ src="bookmark.svg" id="bookmark_indicator" data-i18n="[title]search.bookmark"> - +