fix: prevent gesture events in listbox

qlik-oss · Mar 31, 2023 · ffaf757 · ffaf757
1 parent 82992dc
commit ffaf757
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/apis/nucleus/src/components/listbox/ListBox.jsx b/apis/nucleus/src/components/listbox/ListBox.jsx
@@ -128,6 +128,7 @@ export default function ListBox({
     selections,
     checkboxes,
     doc: document,
+    loaderRef,
   });
 
   const { layoutOptions = {} } = layout || {};

diff --git a/...us/src/components/listbox/hooks/selections/__tests__/use-selections-interactions.test.jsx b/...us/src/components/listbox/hooks/selections/__tests__/use-selections-interactions.test.jsx
@@ -25,6 +25,7 @@ describe('use-listbox-interactions', () => {
   let setPages;
   let layout;
   let updateSelectionState;
+  let loaderRef;
 
   beforeEach(() => {
     jest.spyOn(global.document, 'addEventListener').mockImplementation(jest.fn());
@@ -69,13 +70,16 @@ describe('use-listbox-interactions', () => {
     };
 
     ref = React.createRef();
+    loaderRef = {
+      current: null,
+    };
     render = async (overrides = {}) => {
       await act(async () => {
         create(
           <TestHook
             ref={ref}
             hook={useSelectionsInteractions}
-            hookProps={[{ selectionState, selections, doc: global.document, ...overrides }]}
+            hookProps={[{ selectionState, selections, doc: global.document, loaderRef, ...overrides }]}
           />
         );
       });

diff --git a/apis/nucleus/src/components/listbox/hooks/selections/useSelectionsInteractions.js b/apis/nucleus/src/components/listbox/hooks/selections/useSelectionsInteractions.js
@@ -1,11 +1,18 @@
+/* eslint-disable no-underscore-dangle */
 import { useEffect, useCallback, useRef } from 'react';
 import { selectValues, fillRange, getElemNumbersFromPages } from './listbox-selections';
 import rowColClasses from '../../components/ListBoxRowColumn/helpers/classes';
 
 const dataItemSelector = `.${rowColClasses.fieldRoot}`;
 const getKeyAsToggleSelected = (event) => !(event?.metaKey || event?.ctrlKey);
 
-export default function useSelectionsInteractions({ selectionState, selections, checkboxes = false, doc = document }) {
+export default function useSelectionsInteractions({
+  selectionState,
+  selections,
+  checkboxes = false,
+  doc = document,
+  loaderRef,
+}) {
   const currentSelect = useRef({
     startElemNumber: undefined,
     elemNumbers: [],
@@ -16,6 +23,25 @@ export default function useSelectionsInteractions({ selectionState, selections,
     touchRangeSmall: false,
   });
 
+  useEffect(() => {
+    if (!loaderRef.current?._listRef?._outerRef) {
+      return undefined;
+    }
+    const preventGestureStart = (e) => e.preventDefault();
+    const preventGestureChange = (e) => e.preventDefault();
+    const preventGestureEnd = (e) => e.preventDefault();
+
+    const listRef = loaderRef.current._listRef._outerRef;
+    listRef.addEventListener('gesturestart', preventGestureStart);
+    listRef.addEventListener('gesturechange', preventGestureChange);
+    listRef.addEventListener('gestureend', preventGestureEnd);
+    return () => {
+      listRef.removeEventListener('gesturestart', preventGestureStart);
+      listRef.removeEventListener('gesturechange', preventGestureChange);
+      listRef.removeEventListener('gestureend', preventGestureEnd);
+    };
+  }, [loaderRef.current?._listRef?._outerRef]);
+
   // eslint-disable-next-line arrow-body-style
   const doSelect = () => {
     selectionState.setSelectableValuesUpdating();