[FIX] point_of_sale: edit list popup failed to show

When trying to add a product that requires specifying lot/serial numbers,
the popup to list the numbers failed to display. This is because there
is no longer `el` in component. We need to explicitly reference the element
we need. This commit introduces a t-ref in the root element of the EditListPopup
to have a reference to it from the useAutoFocusToLast hook to fix the issue.

closes odoo/odoo#117465

X-original-commit: 2a6368e7b72da5a64705cbc3c1f5d44b85677ab0
Signed-off-by: Trinh Jacky (trj) <trj@odoo.com>
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>

addons/point_of_sale/static/src/js/custom_hooks.js

@@ -3,7 +3,7 @@ import { OfflineErrorPopup } from "./Popups/OfflineErrorPopup";
 import { ConfirmPopup } from "./Popups/ConfirmPopup";
 import { ErrorTracebackPopup } from "./Popups/ErrorTracebackPopup";
 import { ErrorPopup } from "./Popups/ErrorPopup";
-import { useEnv, onMounted, onPatched, useComponent } from "@odoo/owl";
+import { useEnv, onMounted, onPatched, useComponent, useRef } from "@odoo/owl";
 
 /**
  * Introduce error handlers in the component.
@@ -75,12 +75,15 @@ export function useErrorHandlers() {
     };
 }
 
+/**
+ * Assumes t-ref="root" in the root element of the component that uses this hook.
+ */
 export function useAutoFocusToLast() {
-    const current = useComponent();
+    const root = useRef("root");
     let target = null;
     function autofocus() {
         const prevTarget = target;
-        const allInputs = current.el.querySelectorAll("input");
+        const allInputs = root.el.querySelectorAll("input");
         target = allInputs[allInputs.length - 1];
         if (target && target !== prevTarget) {
             target.focus();

addons/point_of_sale/static/src/xml/Popups/EditListPopup.xml

@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="EditListPopup" owl="1">
-        <div class="popup popup-text edit-list-popup">
+        <div class="popup popup-text edit-list-popup" t-ref="root">
             <header class="title">
                 <t t-esc="props.title" />
                 <span class="sub-title" t-esc="props.name"/>