fix(react-chart): fix zooming on IPad (#2122)

packages/dx-react-chart/src/plugins/zoom-and-pan.test.tsx

@@ -12,6 +12,10 @@ jest.mock('@devexpress/dx-chart-core', () => ({
   attachEvents: jest.fn(),
   detachEvents: jest.fn(),
   getRect: jest.fn(),
+  getOffset: jest.fn(),
+  getEventCoords: jest.fn(),
+  isKeyPressed: jest.fn(),
+  isMultiTouch: jest.fn(),
 }));
 
 const DragBoxComponent = () => null;
@@ -24,6 +28,9 @@ describe('ZoomAndPan', () => {
       rootRef: {
         current: {},
       },
+      layouts: {
+        pane: {},
+      },
     },
   };
   const defaultProps = {
@@ -89,4 +96,19 @@ describe('ZoomAndPan', () => {
     tree.unmount();
     expect(detachEvents).toBeCalledTimes(3);
   });
+
+  it('should call "preventDefault" in "start" handler', () => {
+    const tree = mount((
+      <PluginHost>
+        {pluginDepsToComponents(defaultDeps)}
+        <ZoomAndPan  {...defaultProps} />
+      </PluginHost>
+    ));
+    const preventDefault = jest.fn();
+    const { onStart } = tree.find('ZoomPanProvider').props() as any;
+
+    onStart({ preventDefault });
+
+    expect(preventDefault).toBeCalled();
+  });
 });

packages/dx-react-chart/src/plugins/zoom-and-pan.tsx

@@ -115,6 +115,12 @@ class ZoomAndPanBase extends React.PureComponent<ZoomAndPanProps, ZoomAndPanStat
   }
 
   handleStart(zoomRegionKey: string, e: any) {
+    // Default browser behavior is prevented in "move" handler. It is not enough for IPad.
+    // Calling "preventDefault" here (on "start") works for IPad.
+    // Going further, since we have to call "preventDefault" on "start" we may try to get rid of
+    // "preventDefault" on move.
+    // TODO: Try to remove "preventDefault" from "move" handler.
+    e.preventDefault();
     this.offset = getOffset(e.currentTarget);
     const coords = getEventCoords(e, this.offset);
       // Rectangle mode should be canceled if "zoomRegionKey" is released during mouse movevent or