Skip to content

Commit

Permalink
Fix broken keyboard navigation in the help browser.
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
agraef committed Sep 19, 2020
1 parent 44f5db0 commit 5f9e943
Showing 1 changed file with 12 additions and 2 deletions.
14 changes: 12 additions & 2 deletions pd/nw/dialog_search.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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)) {
Expand Down Expand Up @@ -887,7 +897,7 @@
src="bookmark.svg"
id="bookmark_indicator"
data-i18n="[title]search.bookmark">
</form>
</form>
<div id="results">
</div>
<div id = "console_find" style="display:none;">
Expand Down

0 comments on commit 5f9e943

Please sign in to comment.