[FIX] web_responsive: Allow searching apps in mobile Chrome

This patch fixes #1251.

The keydown event is faked in mobile chrome because it's not something reliable due to today's virtual keyboards prediction features. Typing a <kbd>C</kbd> character doesn't mean it will be there when user uses autocorrection/autoguessing.

Instead of that, we use now the `keydown` event exclusively for movement features, and `input` event exclusively for content changes in the search input element.

Apart from fixing search in mobile Chrome, it also makes code more readable.

The search input also disables autocompletion since it would be useless and annoying here.
pull/1819/head
Jairo Llopis 2019-04-15 10:30:53 +01:00 committed by Splash
parent 35678581b7
commit f567959665
2 changed files with 7 additions and 11 deletions

View File

@ -72,6 +72,7 @@ odoo.define('web_responsive', function (require) {
AppsMenu.include({
events: _.extend({
"keydown .search-input input": "_searchResultsNavigate",
"input .search-input input": "_searchMenusSchedule",
"click .o-menu-search-result": "_searchResultChosen",
"shown.bs.dropdown": "_searchFocus",
"hidden.bs.dropdown": "_searchReset",
@ -217,17 +218,15 @@ odoo.define('web_responsive', function (require) {
* @param {jQuery.Event} event
*/
_searchResultsNavigate: function (event) {
// Exit soon when not navigating results
if (this.$search_results.html().trim() === "") {
// Just in case it is the 1st search
this._searchMenusSchedule();
return;
}
// Find current results and active element (1st by default)
var all = this.$search_results.find(".o-menu-search-result"),
pre_focused = all.filter(".active") || $(all[0]),
offset = all.index(pre_focused),
key = event.key;
// Keyboard navigation only supports search results
if (!all.length) {
return;
}
// Transform tab presses in arrow presses
if (key === "Tab") {
event.preventDefault();
@ -245,12 +244,8 @@ odoo.define('web_responsive', function (require) {
case "ArrowDown":
offset++;
break;
// Other keys trigger a search
default:
// All keys that write a character have length 1
if (key.length === 1 || key === "Backspace") {
this._searchMenusSchedule();
}
// Other keys are useless in this event
return;
}
// Allow looping on results

View File

@ -30,6 +30,7 @@
</div>
</div>
<input type="search"
autocomplete="off"
placeholder="Search menus..."
class="form-control"/>
</div>