From a44b3f8fb38dc367d5e8d1a98e2b920dbad1110b Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Fri, 10 Jun 2022 10:13:07 +0000
Subject: [PATCH] [FIX] web: left/rigth navigation in search bar

Before this commit, if there were several facets in the search bar, it
was not possible to navigate correctly between them.

closes odoo/odoo#93547

X-original-commit: d2b6aab509717866ab42a9750adbb884ccec18a4
Signed-off-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../src/search/search_bar/search_bar.js       |  2 +-
 .../static/tests/search/search_bar_tests.js   | 42 +++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/search/search_bar/search_bar.js b/addons/web/static/src/search/search_bar/search_bar.js
index 05161e8b91f..30c81eba892 100644
--- a/addons/web/static/src/search/search_bar/search_bar.js
+++ b/addons/web/static/src/search/search_bar/search_bar.js
@@ -223,7 +223,7 @@ export class SearchBar extends Component {
     focusFacet(index) {
         const facets = this.root.el.getElementsByClassName("o_searchview_facet");
         if (facets.length) {
-            if (!index) {
+            if (index === undefined) {
                 facets[facets.length - 1].focus();
             } else {
                 facets[index].focus();
diff --git a/addons/web/static/tests/search/search_bar_tests.js b/addons/web/static/tests/search/search_bar_tests.js
index 1674d14e049..0aebe7deb00 100644
--- a/addons/web/static/tests/search/search_bar_tests.js
+++ b/addons/web/static/tests/search/search_bar_tests.js
@@ -167,6 +167,48 @@ QUnit.module("Search", (hooks) => {
         assert.strictEqual(document.activeElement, target.querySelector(".o_searchview input"));
     });
 
+    QUnit.test("navigation with facets (2)", async function (assert) {
+        await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+            context: {
+                search_default_date_group_by: 1,
+                search_default_foo: 1,
+            },
+        });
+
+        assert.containsN(target, ".o_searchview .o_searchview_facet", 2);
+        assert.strictEqual(document.activeElement, target.querySelector(".o_searchview input"));
+
+        // press left to focus the rightmost facet
+        await triggerEvent(document.activeElement, null, "keydown", { key: "ArrowLeft" });
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_searchview .o_searchview_facet:nth-child(2)")
+        );
+
+        // press left to focus the leftmost facet
+        await triggerEvent(document.activeElement, null, "keydown", { key: "ArrowLeft" });
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_searchview .o_searchview_facet:nth-child(1)")
+        );
+
+        // press left to focus the input
+        await triggerEvent(document.activeElement, null, "keydown", { key: "ArrowLeft" });
+        assert.strictEqual(document.activeElement, target.querySelector(".o_searchview input"));
+
+        // press left to focus the leftmost facet
+        await triggerEvent(document.activeElement, null, "keydown", { key: "ArrowRight" });
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_searchview .o_searchview_facet:nth-child(1)")
+        );
+    });
+
     QUnit.test("search date and datetime fields. Support of timezones", async function (assert) {
         assert.expect(4);