diff options
author | siikamiika <siikamiika@users.noreply.github.com> | 2019-10-26 01:26:56 +0300 |
---|---|---|
committer | siikamiika <siikamiika@users.noreply.github.com> | 2019-10-26 01:26:56 +0300 |
commit | a716a52cab143ae2e02b54c2f075a8731de16193 (patch) | |
tree | 75947b4efcda91e821e82b8528559bbafdb87c1a | |
parent | 43ddffeb7a21df1453df64aaeeffb4debcd9d85f (diff) |
make non-hotkey keys focus input on search page
The issue was that scanning on search page introduced a way to lose
focus of the query input, and the new feature that the search page
hotkey focuses an existing search page instead of opening a new one made
it more obvious.
Now every key that isn't a hotkey focuses the query input, and typing
text into the box scrolls it into view in case it wasn't there when
searching.
There is an accessibility issue that this can cause, because now tab
also focuses the query input before it focuses the next element. I
didn't implement a workaround for that because it would have been more
complicated than this simple fix.
Fixes #263
-rw-r--r-- | ext/bg/js/search.js | 7 | ||||
-rw-r--r-- | ext/mixed/js/display.js | 2 |
2 files changed, 9 insertions, 0 deletions
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 431478c9..5c0bffed 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -79,6 +79,7 @@ class DisplaySearch extends Display { onSearchInput() { this.updateSearchButton(); + this.query.scrollIntoView(); } onSearch(e) { @@ -94,6 +95,12 @@ class DisplaySearch extends Display { this.onSearchQueryUpdated(query, true); } + onKeyDown(e) { + if (!super.onKeyDown(e)) { + this.query.focus({preventScroll: true}); + } + } + async onSearchQueryUpdated(query, animate) { try { const valid = (query.length > 0); diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index b40228b0..bdc5e962 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -157,8 +157,10 @@ class Display { const handler = handlers[key]; if (handler(this, e)) { e.preventDefault(); + return true; } } + return false; } onWheel(e) { |