From 7e1737cb0ffb6b81a9723328269ad6ffa4e3da36 Mon Sep 17 00:00:00 2001
From: "Francois (fge)" <fge@odoo.com>
Date: Tue, 14 Sep 2021 14:18:44 +0000
Subject: [PATCH] [FIX] web: scroll in the command palette on firefox

Before this commit, it is impossible to scroll with the arrows
in the command palette on Firefox.

Using a <span> to wrap the commands made the offsetTop value wrong on
Firefox and the offsetHeight value wrong on Google Chrome.
So we replaced the <span> with a <div> which solves the problems. So we
will be able to use this <div> in the scrollTo and not its child.

X-original-commit: f52eb7ee6b93aef0c5b80744127548b0a2fdb4fd
Part-of: odoo/odoo#76613
---
 addons/web/static/src/webclient/commands/command_palette.js  | 2 +-
 addons/web/static/src/webclient/commands/command_palette.xml | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/webclient/commands/command_palette.js b/addons/web/static/src/webclient/commands/command_palette.js
index f9cdd9bd5be..6427f964811 100644
--- a/addons/web/static/src/webclient/commands/command_palette.js
+++ b/addons/web/static/src/webclient/commands/command_palette.js
@@ -212,7 +212,7 @@ export class CommandPalette extends Component {
 
         const listbox = this.el.querySelector(".o_command_palette_listbox");
         const command = listbox.querySelector(`#o_command_${nextIndex}`);
-        scrollTo(command.children[0], listbox);
+        scrollTo(command, listbox);
     }
 
     onCommandClicked(index) {
diff --git a/addons/web/static/src/webclient/commands/command_palette.xml b/addons/web/static/src/webclient/commands/command_palette.xml
index aa32710a7f3..2fba31da594 100644
--- a/addons/web/static/src/webclient/commands/command_palette.xml
+++ b/addons/web/static/src/webclient/commands/command_palette.xml
@@ -16,9 +16,9 @@
             <div class="o_command_category" t-key="category.keyId">
               <t t-foreach="category.commands" t-as="command">
                 <t t-set="commandIndex" t-value="state.commands.indexOf(command)" />
-                <span t-attf-id="o_command_{{commandIndex}}" class="o_command" t-att-class="{ focused: state.selectedCommand === command }" t-on-click="onCommandClicked(commandIndex)" t-on-mouseenter="onCommandMouseEnter(commandIndex)" t-key="command.keyId">
+                <div t-attf-id="o_command_{{commandIndex}}" class="o_command" t-att-class="{ focused: state.selectedCommand === command }" t-on-click="onCommandClicked(commandIndex)" t-on-mouseenter="onCommandMouseEnter(commandIndex)" t-key="command.keyId">
                   <t t-component="command.Component || DefaultCommandItem" name="command.name" t-props="command.props" t-on-close="props.closeMe()" t-on-execute-command="executeCommand(command)"/>
-                </span>
+                </div>
               </t>
             </div>