[FIX] Spreadsheet: fix scroll on ios

When opening a spreadsheet and scrolling towards the bottom of the
sheet, the "default" behaviour of ios which is to have some sort of
wobble when we scrolled all the way down, is triggered. It should
not occur when scrolling inside the grid.

closes #7514

Task: 5270869
X-original-commit: 83c393f
Signed-off-by: Pierre Rousseau (pro) <pro@odoo.com>

Author: rrahir

src/components/dashboard/dashboard.ts

@@ -63,10 +63,19 @@ export class SpreadsheetDashboard extends Component<Props, SpreadsheetChildEnv>
     });
     this.cellPopovers = useStore(CellPopoverStore);
 
-    useTouchScroll(this.gridRef, this.moveCanvas.bind(this), () => {
-      const { scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
-      return scrollY > 0;
-    });
+    useTouchScroll(
+      this.gridRef,
+      this.moveCanvas.bind(this),
+      () => {
+        const { scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
+        return scrollY > 0;
+      },
+      () => {
+        const { maxOffsetY } = this.env.model.getters.getMaximumSheetOffset();
+        const { scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
+        return scrollY < maxOffsetY;
+      }
+    );
   }
 
   get gridContainer() {

src/components/grid/grid.ts

@@ -196,10 +196,19 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
       () => [this.sidePanel.isMainPanelOpen, this.sidePanel.isSecondaryPanelOpen]
     );
 
-    useTouchScroll(this.gridRef, this.moveCanvas.bind(this), () => {
-      const { scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
-      return scrollY > 0;
-    });
+    useTouchScroll(
+      this.gridRef,
+      this.moveCanvas.bind(this),
+      () => {
+        const { scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
+        return scrollY > 0;
+      },
+      () => {
+        const { maxOffsetY } = this.env.model.getters.getMaximumSheetOffset();
+        const { scrollY } = this.env.model.getters.getActiveSheetScrollInfo();
+        return scrollY < maxOffsetY;
+      }
+    );
   }
 
   get highlights() {

src/components/helpers/touch_scroll_hook.ts

@@ -10,10 +10,9 @@ export const resetTimeoutDuration = 100;
 
 export function useTouchScroll(
   ref: Ref<HTMLElement>,
-
   updateScroll: (offsetX: number, offsetY: number) => void,
-
-  canMoveUp: () => boolean
+  canMoveUp: () => boolean,
+  canMoveDown: () => boolean
 ) {
   let lastX = 0;
   let lastY = 0;
@@ -57,13 +56,13 @@ export function useTouchScroll(
     lastX = clientX;
     lastY = clientY;
     lastTime = currentTime;
-
-    if (canMoveUp()) {
+    if ((deltaY < 0 && canMoveUp()) || (deltaY > 0 && canMoveDown())) {
       if (event.cancelable) {
         event.preventDefault();
       }
       event.stopPropagation();
     }
+
     resetTimeout = setTimeout(() => {
       velocityX = 0;
       velocityY = 0;

src/plugins/ui_stateful/sheetview.ts

@@ -109,6 +109,7 @@ export class SheetViewPlugin extends UIPlugin {
     "getFigureUI",
     "getPositionAnchorOffset",
     "getGridOffset",
+    "getMaximumSheetOffset",
   ] as const;
 
   private viewports: Record<UID, SheetViewports | undefined> = {};
@@ -396,7 +397,7 @@ export class SheetViewPlugin extends UIPlugin {
     return { x, y, width, height };
   }
 
-  private getMaximumSheetOffset(): { maxOffsetX: Pixel; maxOffsetY: Pixel } {
+  getMaximumSheetOffset(): { maxOffsetX: Pixel; maxOffsetY: Pixel } {
     const sheetId = this.getters.getActiveSheetId();
     const { width, height } = this.getMainViewportRect();
     const viewport = this.getMainInternalViewport(sheetId);

tests/grid/grid_component.test.ts

@@ -264,7 +264,7 @@ describe("Grid component", () => {
     expect(getVerticalScroll()).toBe(50);
   });
 
-  test("Event is stopped if not at the top", async () => {
+  test("Event is stopped if not at the top when scrolling upwards", async () => {
     const grid = fixture.querySelector(".o-grid-overlay")!;
     expect(getHorizontalScroll()).toBe(0);
     expect(getVerticalScroll()).toBe(0);
@@ -273,16 +273,35 @@ describe("Grid component", () => {
     fixture.addEventListener("touchmove", mockCallback);
 
     triggerTouchEvent(grid, "touchstart", { clientX: 0, clientY: 150, identifier: 1 });
-    // move down; we are at the top: ev not prevented
+    // move down; we are at the top: ev is prevented
     triggerTouchEvent(grid, "touchmove", { clientX: 0, clientY: 120, identifier: 2 });
-    expect(mockCallback).toBeCalledTimes(1);
+    expect(mockCallback).toBeCalledTimes(0);
     jest.advanceTimersByTime(10);
     // move up:; we are not at the top: ev prevented
     triggerTouchEvent(grid, "touchmove", { clientX: 0, clientY: 150, identifier: 3 });
-    expect(mockCallback).toBeCalledTimes(1);
+    expect(mockCallback).toBeCalledTimes(0);
     // move up again but we are at the stop: ev not prevented
     triggerTouchEvent(grid, "touchmove", { clientX: 0, clientY: 150, identifier: 4 });
-    expect(mockCallback).toBeCalledTimes(2);
+    expect(mockCallback).toBeCalledTimes(1);
+  });
+
+  test("Event is stopped if not at the top when scrolling downwards", async () => {
+    const grid = fixture.querySelector(".o-grid-overlay")!;
+    const { maxOffsetY } = model.getters.getMaximumSheetOffset();
+    expect(getHorizontalScroll()).toBe(0);
+    expect(getVerticalScroll()).toBe(0);
+
+    const mockCallback = jest.fn(() => {});
+    fixture.addEventListener("touchmove", mockCallback);
+
+    triggerTouchEvent(grid, "touchstart", { clientX: 0, clientY: maxOffsetY + 10, identifier: 1 });
+    // move down, to scroll all the way down; ev is prevented
+    triggerTouchEvent(grid, "touchmove", { clientX: 0, clientY: 10, identifier: 2 });
+    expect(mockCallback).toBeCalledTimes(0);
+    jest.advanceTimersByTime(10);
+    // move down again, we are at the bottom: ev prevented
+    triggerTouchEvent(grid, "touchmove", { clientX: 0, clientY: 0, identifier: 3 });
+    expect(mockCallback).toBeCalledTimes(1);
   });
 
   test("Double clicking only opens composer when actually targetting grid overlay", async () => {