scrollWheelZoom only after click

app/react/Map/LMap.tsx

@@ -73,6 +73,21 @@ const LMap = ({
     markerGroup.addTo(map);
   };
 
+  const shouldScroll: boolean = props.renderPopupInfo || props.onClick !== undefined;
+  const enableMapGestures = () => {
+    if (shouldScroll) {
+      map.scrollWheelZoom.enable();
+    }
+    map.dragging.enable();
+  };
+
+  const disableMapGestures = (event: MouseEvent) => {
+    if (event.target && !map.getContainer().contains(event.target as Node)) {
+      map.scrollWheelZoom.disable();
+    }
+    map.dragging.disable();
+  };
+
   const initMap = () => {
     const baseMaps = getMapProvider(props.tilesProvider, props.mapApiKey);
     const mapLayers: { [k: string]: L.TileLayer } = {};
@@ -84,17 +99,20 @@ const LMap = ({
       mapLayers[key] = baseMaps[key].layer;
     });
 
-    const shouldScroll: boolean = props.renderPopupInfo || props.onClick !== undefined;
     map = L.map(containerId, {
       center: [props.startingPoint[0].lat, props.startingPoint[0].lon],
       zoom,
       maxZoom: 20,
       minZoom: 2,
       zoomControl: false,
       preferCanvas: true,
-      scrollWheelZoom: shouldScroll,
+      scrollWheelZoom: false,
+      wheelDebounceTime: 100,
+      dragging: false,
     });
 
+    map.on('click', enableMapGestures);
+    document.addEventListener('click', disableMapGestures);
     map.getPanes().mapPane.style.zIndex = '0';
     markerGroup = L.markerClusterGroup();
 
@@ -121,9 +139,10 @@ const LMap = ({
       checkMapInitialization(map, containerId);
       initMap();
     }
-
     return () => {
       if (map && reRender) {
+        map.off('click', enableMapGestures);
+        document.removeEventListener('click', disableMapGestures);
         map.remove();
       }
     };

app/react/V2/Components/UI/specs/Map.cy.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { mount } from '@cypress/react18';
+import { Provider } from 'react-redux';
+import { LEGACY_createStore as createStore } from '../../../testing/reduxStore';
+import { LMap } from '../../../../Map/LMap';
+
+describe('LMap Component', () => {
+  beforeEach(() => {
+    mount(
+      <Provider store={createStore()}>
+        <div className="scrollable-content" style={{ height: '500px', overflow: 'auto' }}>
+          <span>
+            {'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec libero'.repeat(100)}
+          </span>
+          <LMap
+            showControls
+            height={500}
+            startingPoint={[{ lat: 40, lon: 15 }]}
+            templatesInfo={{}}
+            tilesProvider="mapbox"
+            mapApiKey=""
+            onClick={() => ({})}
+          />
+          <span>{'MORE CONTENT / '.repeat(200)}</span>
+          <span className="ending-content">ENDING</span>
+        </div>
+      </Provider>
+    );
+  });
+  it('should render the map on a larger page and scroll to the bottom', () => {
+    cy.get('.leaflet-container').should('exist');
+    cy.get('div').realMouseWheel({ deltaY: 1500, scrollBehavior: 'bottom' });
+    cy.contains('ENDING').should('be.visible');
+
+    cy.get('div.scrollable-content').then($div => {
+      const scrollTop = $div.scrollTop();
+      const scrollHeight = $div.prop('scrollHeight');
+      const clientHeight = $div.prop('clientHeight');
+
+      expect(scrollTop + clientHeight).to.be.equal(scrollHeight);
+    });
+  });
+
+  it('should enable scrollWheelZoom on click', () => {
+    cy.get('.leaflet-container').scrollIntoView();
+    cy.get('.leaflet-container').click();
+    cy.get('div').realMouseWheel({ deltaY: 1500, scrollBehavior: 'bottom' });
+    cy.get('div.scrollable-content').then($div => {
+      const scrollTop = $div.scrollTop();
+      const scrollHeight = $div.prop('scrollHeight');
+      const clientHeight = $div.prop('clientHeight');
+      expect(scrollTop + clientHeight).to.be.lessThan(scrollHeight - 400);
+    });
+  });
+});