[IMP] web: t-ref instead of this.el in the CommandPalette

The commit adapts the CommandPalette to use a t-ref to a node
in the template instead of a this.el.querySelector("...") in
the component to query an element. This will improve the
compatibility with Owl 2.

closes odoo/odoo#82752

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/core/commands/command_palette.js

@@ -9,7 +9,7 @@ import { debounce } from "@web/core/utils/timing";
 import { _lt } from "@web/core/l10n/translation";
 
 const { Component, hooks } = owl;
-const { onWillStart, useState } = hooks;
+const { onWillStart, useRef, useState } = hooks;
 
 const DEFAULT_PLACEHOLDER = _lt("Search...");
 const DEFAULT_EMPTY_MESSAGE = _lt("No result found");
@@ -93,6 +93,8 @@ export class CommandPalette extends Component {
             commands: [],
         });
 
+        this.listboxRef = useRef("listbox");
+
         onWillStart(() => this.setCommandPaletteConfig(this.props.config));
     }
 
@@ -205,9 +207,8 @@ export class CommandPalette extends Component {
         }
         this.selectCommand(nextIndex);
 
-        const listbox = this.el.querySelector(".o_command_palette_listbox");
-        const command = listbox.querySelector(`#o_command_${nextIndex}`);
-        scrollTo(command, { scrollable: listbox });
+        const command = this.listboxRef.el.querySelector(`#o_command_${nextIndex}`);
+        scrollTo(command, { scrollable: this.listboxRef.el });
     }
 
     onCommandClicked(index) {

addons/web/static/src/core/commands/command_palette.xml

@@ -8,7 +8,7 @@
         <i  t-att-title="state.placeholder" role="img"  t-att-aria-label="state.placeholder" class="fa fa-search"></i>
       </div>
 
-      <div class="o_command_palette_listbox">
+      <div t-ref="listbox" class="o_command_palette_listbox">
         <div t-if="!state.commands.length" class="o_command_palette_listbox_empty" t-esc="state.emptyMessage"/>
         <t t-if="!isFuzzySearch">
           <t t-foreach="commandsByCategory" t-as="category">