From 1e2ff5d7f1b4085d6147be5f507314bd56e9f7a2 Mon Sep 17 00:00:00 2001 From: Benoit Socias Date: Tue, 23 Aug 2022 14:24:14 +0000 Subject: [PATCH] [FIX] website: handle search keyboard navigation manually Since [1] when BS5 was introduced, the keyboard navigation of search autocomplete suggestions did not work anymore. This commit avoids relying on bootstrap and JQuery to navigate the suggestions. [1]: https://github.com/odoo/odoo/commit/971e5a91aab96d36129a823e03f1f9f1b1293968 task-3148871 closes odoo/odoo#112733 X-original-commit: be549b7b64a253149d55b7f73f1d1a25a29388f9 Signed-off-by: Outagant Mehdi (mou) Signed-off-by: Quentin Smetz (qsm) --- addons/website/static/src/snippets/s_searchbar/000.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/addons/website/static/src/snippets/s_searchbar/000.js b/addons/website/static/src/snippets/s_searchbar/000.js index 8c04fa45827..256994d7715 100644 --- a/addons/website/static/src/snippets/s_searchbar/000.js +++ b/addons/website/static/src/snippets/s_searchbar/000.js @@ -11,7 +11,7 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({ events: { 'input .search-query': '_onInput', 'focusout': '_onFocusOut', - 'keydown .search-query': '_onKeydown', + 'keydown .search-query, .dropdown-item': '_onKeydown', 'search .search-query': '_onSearch', }, autocompleteMinWidth: 300, @@ -242,8 +242,13 @@ publicWidget.registry.searchBar = publicWidget.Widget.extend({ case $.ui.keyCode.DOWN: ev.preventDefault(); if (this.$menu) { - let $element = ev.which === $.ui.keyCode.UP ? this.$menu.children().last() : this.$menu.children().first(); - $element.focus(); + const focusableEls = [this.$input[0], ...this.$menu[0].children]; + const focusedEl = document.activeElement; + const currentIndex = focusableEls.indexOf(focusedEl) || 0; + const delta = ev.which === $.ui.keyCode.UP ? focusableEls.length - 1 : 1; + const nextIndex = (currentIndex + delta) % focusableEls.length; + const nextFocusedEl = focusableEls[nextIndex]; + nextFocusedEl.focus(); } break; case $.ui.keyCode.ENTER: