From 05b85b085aa8f02c031d5a39041d4ef4aa0da0c5 Mon Sep 17 00:00:00 2001
From: Vincent Schippefilt <vsc@odoo.com>
Date: Fri, 10 Feb 2023 12:11:00 +0000
Subject: [PATCH] [FIX] web: error when focus is inside a kanban card

repro steps:
1) in any kanban view that is not grouped, use the arrow key to focus the last card
2) use the up key to focus the previous card
3) use the TAB key to focus any element inside that card
4) use the down key to try to navigate to the last card -> traceback

The error comes from the fact that `focusNextCard` assumes that the
focus is exactly on the card element and not on any of its children.

closes odoo/odoo#112797

X-original-commit: 76434f4959cd0fade41ad02f790226f1a8046fea
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../src/views/kanban/kanban_renderer.js       |  7 ++++--
 .../static/tests/views/kanban_view_tests.js   | 25 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/views/kanban/kanban_renderer.js b/addons/web/static/src/views/kanban/kanban_renderer.js
index 88bfc3076f5..fc4b2c8f6e6 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/views/kanban/kanban_renderer.js
@@ -606,16 +606,19 @@ export class KanbanRenderer extends Component {
      */
     focusNextCard(area, direction) {
         const { isGrouped } = this.props.list;
+        const closestCard = document.activeElement.closest(".o_kanban_record");
+        if (!closestCard) {
+            return;
+        }
         const groups = isGrouped ? [...area.querySelectorAll(".o_kanban_group")] : [area];
         const cards = [...groups]
             .map((group) => [...group.querySelectorAll(".o_kanban_record")])
             .filter((group) => group.length);
 
-        // Search current card position
         let iGroup;
         let iCard;
         for (iGroup = 0; iGroup < cards.length; iGroup++) {
-            const i = cards[iGroup].indexOf(document.activeElement);
+            const i = cards[iGroup].indexOf(closestCard);
             if (i !== -1) {
                 iCard = i;
                 break;
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index 6e4e7d965dc..44bd827e7bd 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -9755,6 +9755,31 @@ QUnit.module("Views", (hooks) => {
         assert.strictEqual(document.activeElement, getCard(0), "the first card should be focussed");
     });
 
+    QUnit.test("keyboard navigation on kanban basic rendering does not crash when the focus is inside a card", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban><templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<t t-esc="record.foo.value"/>' +
+                '<field name="foo"/>' +
+                '<a href="#" class="o-this-is-focussable">ho! this is focussable</a>' +
+                "</div>" +
+                "</t></templates></kanban>",
+        });
+
+        getCard(0).querySelector(".o-this-is-focussable").focus();
+        triggerHotkey("ArrowDown");
+
+        assert.strictEqual(
+            document.activeElement,
+            getCard(1),
+            "the second card should be focussed"
+        );
+    });
+
     QUnit.test("keyboard navigation on kanban grouped rendering", async (assert) => {
         await makeView({
             type: "kanban",