From da8ff3d087e27b21def49eaa69fccc53b2fa6203 Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Fri, 14 Jan 2022 09:45:20 +0000
Subject: [PATCH] [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 +++++----
 addons/web/static/src/core/commands/command_palette.xml | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/addons/web/static/src/core/commands/command_palette.js b/addons/web/static/src/core/commands/command_palette.js
index 605cfab33b6..29b4e76dff9 100644
--- a/addons/web/static/src/core/commands/command_palette.js
+++ b/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) {
diff --git a/addons/web/static/src/core/commands/command_palette.xml b/addons/web/static/src/core/commands/command_palette.xml
index 39c4f8877c0..9b012387dd7 100644
--- a/addons/web/static/src/core/commands/command_palette.xml
+++ b/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">