[FIX] point_of_sale: touch events are passive and allow resize with touch events

1. Methods associated to touchmove and touchstart listeners should not
call preventDefault because they are passive by default. Calling preventDefault
will do nothing but in chrome browser, error message is issued.
2. We now allow resize based on touch events.

closes odoo/odoo#54612

X-original-commit: c6b7133d9c9dc52a8d283124b5a4497940e54682
Signed-off-by: pimodoo <pimodoo@users.noreply.github.com>

2 files changed, 32 insertions, 5 deletions

diff --git a/addons/point_of_sale/static/src/js/Misc/Draggable.js b/addons/point_of_sale/static/src/js/Misc/Draggable.js
index 0c5f2556524..cbb1eba85f8 100644
--- a/addons/point_of_sale/static/src/js/Misc/Draggable.js
+++ b/addons/point_of_sale/static/src/js/Misc/Draggable.js
@@ -92,7 +92,6 @@ odoo.define('point_of_sale.Draggable', function(require) {
                 this.el.style.left = `${posLeft}px`;
                 this.el.style.top = `${posTop}px`;
             }
-            event.preventDefault();
         }
         endDrag() {
             if (this.isDragging) {
diff --git a/addons/pos_restaurant/static/src/js/Resizeable.js b/addons/pos_restaurant/static/src/js/Resizeable.js
index a5bfe243c9a..c651ae09101 100644
--- a/addons/pos_restaurant/static/src/js/Resizeable.js
+++ b/addons/pos_restaurant/static/src/js/Resizeable.js
@@ -42,6 +42,38 @@ odoo.define('pos_restaurant.Resizeable', function(require) {
             useExternalListener(document, 'mouseup', this.endResizeSE);
             useListener('mousedown', '.resize-handle-se', this.startResizeSE);
 
+            useExternalListener(document, 'touchmove', this.resizeN);
+            useExternalListener(document, 'touchend', this.endResizeN);
+            useListener('touchstart', '.resize-handle-n', this.startResizeN);
+
+            useExternalListener(document, 'touchmove', this.resizeS);
+            useExternalListener(document, 'touchend', this.endResizeS);
+            useListener('touchstart', '.resize-handle-s', this.startResizeS);
+
+            useExternalListener(document, 'touchmove', this.resizeW);
+            useExternalListener(document, 'touchend', this.endResizeW);
+            useListener('touchstart', '.resize-handle-w', this.startResizeW);
+
+            useExternalListener(document, 'touchmove', this.resizeE);
+            useExternalListener(document, 'touchend', this.endResizeE);
+            useListener('touchstart', '.resize-handle-e', this.startResizeE);
+
+            useExternalListener(document, 'touchmove', this.resizeNW);
+            useExternalListener(document, 'touchend', this.endResizeNW);
+            useListener('touchstart', '.resize-handle-nw', this.startResizeNW);
+
+            useExternalListener(document, 'touchmove', this.resizeNE);
+            useExternalListener(document, 'touchend', this.endResizeNE);
+            useListener('touchstart', '.resize-handle-ne', this.startResizeNE);
+
+            useExternalListener(document, 'touchmove', this.resizeSW);
+            useExternalListener(document, 'touchend', this.endResizeSW);
+            useListener('touchstart', '.resize-handle-sw', this.startResizeSW);
+
+            useExternalListener(document, 'touchmove', this.resizeSE);
+            useExternalListener(document, 'touchend', this.endResizeSE);
+            useListener('touchstart', '.resize-handle-se', this.startResizeSE);
+
             this.size = { height: 0, width: 0 };
             this.loc = { top: 0, left: 0 };
             this.tempSize = {};
@@ -93,7 +125,6 @@ odoo.define('pos_restaurant.Resizeable', function(require) {
                 this.el.style.height = `${this.size.height - dY}px`;
                 this.el.style.top = `${this.loc.top + dY}px`;
             }
-            event.preventDefault();
         }
         endResizeN() {
             if (this.isResizingN && !this.isResizingE && !this.isResizingW && !this.isResizingS) {
@@ -126,7 +157,6 @@ odoo.define('pos_restaurant.Resizeable', function(require) {
                 }
                 this.el.style.height = `${this.size.height + dY}px`;
             }
-            event.preventDefault();
         }
         endResizeS() {
             if (!this.isResizingN && !this.isResizingE && !this.isResizingW && this.isResizingS) {
@@ -160,7 +190,6 @@ odoo.define('pos_restaurant.Resizeable', function(require) {
                 this.el.style.width = `${this.size.width - dX}px`;
                 this.el.style.left = `${this.loc.left + dX}px`;
             }
-            event.preventDefault();
         }
         endResizeW() {
             if (!this.isResizingN && !this.isResizingE && this.isResizingW && !this.isResizingS) {
@@ -200,7 +229,6 @@ odoo.define('pos_restaurant.Resizeable', function(require) {
                 }
                 this.el.style.width = `${this.size.width + dX}px`;
             }
-            event.preventDefault();
         }
         endResizeE() {
             if (!this.isResizingN && this.isResizingE && !this.isResizingW && !this.isResizingS) {