[FIX] point_of_sale: no need for disableRubberbanding

The primary goal of disableRubberbanding is to disable scrolling during
touch event by default and to allow only selected descendants to have scrolling
active during touchstart+touchmove event. Only elements with class="touch-scrollable"
are allowed for touch scrolling. This restriction can be a good idea but it
results to bug-ridden explicitness which is not necessary because scrolling
should be allowed automatic by default in the first place. In this commit, we
allowed scrolling by default by:

1. We remove disableRubberbanding.
2. We set the position property of .pos to fixed. This is to accomplish the
original goal of disableRubberbanding (fixing the root element in its position).
3. We remove the touch-scrollable class as they are not needed anymore and
no style associated to it.

Removing the disableRubberbanding method also fixes the Intervention error during
touch scrolling event. The reason for that error is we are calling preventDefault
in the event that is passive. touchmove and touchstart events are passive by default
- which means that preventDefault won't work.

X-original-commit: 54f7fb49dae3aab6a005402a1ac60262bbd15edc

7 files changed, 13 insertions, 54 deletions

diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css
index 6a6fda764e9..b55060fd140 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/css/pos.css
@@ -117,7 +117,14 @@ td {
     font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
     color: #555555;
     font-size: 12px;
-    position: absolute;
+    /* Some elements inside .pos are allowed to be moved/resized. When
+     * this 'move/resize' event is performed in touch devices, .pos
+     * element also tries to scroll (as the default action of touchstart+
+     * touchmove events).
+     * Position is fixed to prevent the movement of .pos element during
+     * the described touch events.
+     */
+    position: fixed;
     left: 0;
     top: 0;
     width: 100%;
diff --git a/addons/point_of_sale/static/src/js/Chrome.js b/addons/point_of_sale/static/src/js/Chrome.js
index ce6c340fa06..d54b5f22170 100644
--- a/addons/point_of_sale/static/src/js/Chrome.js
+++ b/addons/point_of_sale/static/src/js/Chrome.js
@@ -357,7 +357,6 @@ odoo.define('point_of_sale.Chrome', function(require) {
                 this.state.uiState.hasBigScrollBars = true;
             }
 
-            this._disableRubberbanding();
             this._disableBackspaceBack();
             this._replaceCrashmanager();
         }
@@ -381,38 +380,6 @@ odoo.define('point_of_sale.Chrome', function(require) {
                 },
             });
         }
-        _disableRubberbanding() {
-            var self = this;
-
-            document.body.addEventListener('touchstart', function (event) {
-                self.previous_touch_y_coordinate = event.touches[0].clientY;
-            });
-
-            // prevent the pos body from being scrollable.
-            document.body.addEventListener('touchmove', function (event) {
-                var node = event.target;
-                var current_touch_y_coordinate = event.touches[0].clientY;
-                var scrolling_down;
-
-                if (current_touch_y_coordinate < self.previous_touch_y_coordinate) {
-                    scrolling_down = true;
-                } else {
-                    scrolling_down = false;
-                }
-
-                while (node) {
-                    if (
-                        node.classList &&
-                        node.classList.contains('touch-scrollable') &&
-                        self._scrollable(node, scrolling_down)
-                    ) {
-                        return;
-                    }
-                    node = node.parentNode;
-                }
-                event.preventDefault();
-            });
-        }
         // prevent backspace from performing a 'back' navigation
         _disableBackspaceBack() {
             $(document).on('keydown', function (e) {
@@ -421,21 +388,6 @@ odoo.define('point_of_sale.Chrome', function(require) {
                 }
             });
         }
-        _scrollable(element, scrolling_down) {
-            var $element = $(element);
-            var scrollable = true;
-
-            if (!scrolling_down && $element.scrollTop() <= 0) {
-                scrollable = false;
-            } else if (
-                scrolling_down &&
-                $element.scrollTop() + $element.height() >= element.scrollHeight
-            ) {
-                scrollable = false;
-            }
-
-            return scrollable;
-        }
     }
     Chrome.template = 'Chrome';
 
diff --git a/addons/point_of_sale/static/src/xml/ChromeWidgets/OrderSelector.xml b/addons/point_of_sale/static/src/xml/ChromeWidgets/OrderSelector.xml
index c557c620107..000a743da04 100644
--- a/addons/point_of_sale/static/src/xml/ChromeWidgets/OrderSelector.xml
+++ b/addons/point_of_sale/static/src/xml/ChromeWidgets/OrderSelector.xml
@@ -3,7 +3,7 @@
 
     <t t-name="OrderSelector" owl="1">
         <div class="order-selector">
-            <span class="orders touch-scrollable">
+            <span class="orders">
                 <t t-foreach="orderList" t-as="order" t-key="order.cid">
                     <t t-if="order === env.pos.get_order()">
                         <span class="order-button select-order selected">
diff --git a/addons/point_of_sale/static/src/xml/Popups/SelectionPopup.xml b/addons/point_of_sale/static/src/xml/Popups/SelectionPopup.xml
index ec250a913f7..4048edd7b3d 100644
--- a/addons/point_of_sale/static/src/xml/Popups/SelectionPopup.xml
+++ b/addons/point_of_sale/static/src/xml/Popups/SelectionPopup.xml
@@ -8,7 +8,7 @@
                     <header class="title drag-handle">
                         <t t-esc="props.title" />
                     </header>
-                    <div class="selection scrollable-y touch-scrollable">
+                    <div class="selection scrollable-y">
                         <t t-foreach="props.list" t-as="item" t-key="item._id">
                             <div class="selection-item" t-att-class="{ selected: item.isSelected }"
                                  t-on-click="selectItem(item.id)">
diff --git a/addons/point_of_sale/static/src/xml/Screens/ClientListScreen/ClientListScreen.xml b/addons/point_of_sale/static/src/xml/Screens/ClientListScreen/ClientListScreen.xml
index fc0fc649b50..5096d92c49f 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ClientListScreen/ClientListScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ClientListScreen/ClientListScreen.xml
@@ -48,7 +48,7 @@
                         </section>
                         <section class="subwindow list">
                             <div class="subwindow-container">
-                                <div class="subwindow-container-fix touch-scrollable scrollable-y">
+                                <div class="subwindow-container-fix scrollable-y">
                                     <table class="client-list">
                                         <thead>
                                             <tr>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
index e3e9836d447..c80a2a6d1ef 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
@@ -28,7 +28,7 @@
             <!-- Subcategories -->
             <t t-if="props.subcategories.length > 0 &amp;&amp; !env.isMobile">
                 <div class="categories">
-                    <div class="category-list-scroller touch-scrollable">
+                    <div class="category-list-scroller">
                         <div class="category-list"
                              t-att-class="{simple: !env.pos.config.iface_display_categ_images}">
                             <t t-foreach="props.subcategories" t-as="category" t-key="category.id">
diff --git a/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml b/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml
index 659f2980bd5..2a792ded92e 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml
@@ -16,7 +16,7 @@
                         Next Order <i class="fa fa-angle-double-right"></i>
                     </div>
                 </div>
-                <div class="centered-content touch-scrollable">
+                <div class="centered-content">
                     <div t-if="state.printInvoiceIsShown" class="button print_invoice"
                          t-on-click="onPrintInvoice">
                         <i class="fa fa-print"></i> Print Invoice