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>