From 5f9e94353d1ab54092de6aaa37c26ff813527fda Mon Sep 17 00:00:00 2001
From: Albert Graef <aggraef@gmail.com>
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 @@ function display_toc() {
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 @@ function toggle_bookmark(dir)
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 @@ function add_events() {
} 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 @@ function doc_search() {
src="bookmark.svg"
id="bookmark_indicator"
data-i18n="[title]search.bookmark">
- </form>
+ </form>
<div id="results">
</div>
<div id = "console_find" style="display:none;">
--
GitLab