[FIX] point_of_sale: auto-scroll in order lines when lots of products added

Before this commit: if the number of order lines exceeds the size of the
order container, it wouldn't scroll to the newly added order line.

The solution is to scroll to the newly selected order line.

opw-3120034

closes odoo/odoo#109535

X-original-commit: bc9302b105a6e53bbfe8efc65c8a36b7a547b1d9
Signed-off-by: Trinh Jacky (trj) <trj@odoo.com>
Signed-off-by: Pedram Bi Ria (pebr) <pebr@odoo.com>

addons/point_of_sale/static/src/js/Screens/ProductScreen/OrderWidget.js

@@ -5,7 +5,7 @@ odoo.define('point_of_sale.OrderWidget', function(require) {
     const PosComponent = require('point_of_sale.PosComponent');
     const Registries = require('point_of_sale.Registries');
 
-    const { onPatched, useRef } = owl;
+    const { useRef, useEffect } = owl;
 
     class OrderWidget extends PosComponent {
         setup() {
@@ -13,16 +13,15 @@ odoo.define('point_of_sale.OrderWidget', function(require) {
             useListener('select-line', this._selectLine);
             useListener('edit-pack-lot-lines', this._editPackLotLines);
             this.scrollableRef = useRef('scrollable');
-            this.scrollToBottom = false;
-            onPatched(() => {
-                // IMPROVEMENT
-                // This one just stays at the bottom of the orderlines list.
-                // Perhaps it is better to scroll to the added or modified orderline.
-                if (this.scrollToBottom) {
-                    this.scrollableRef.el.scrollTop = this.scrollableRef.el.scrollHeight;
-                    this.scrollToBottom = false;
-                }
-            });
+            useEffect(
+                () => {
+                    const selectedLineEl = this.scrollableRef.el && this.scrollableRef.el.querySelector(".orderline.selected");
+                    if(selectedLineEl) {
+                        selectedLineEl.scrollIntoView({ behavior: "smooth", block: "start" });
+                    }
+                },
+                () => [this.order.selected_orderline]
+            );
         }
         get order() {
             return this.env.pos.get_order();