fix portal zooming bug

demo/components/victory-zoom-container-demo.js

@@ -6,7 +6,9 @@ import {
   VictoryChart, VictoryZoomContainer, VictoryArea, VictoryLine,
   VictoryAxis, VictoryGroup, VictoryStack, VictoryScatter
 } from "../../src/index";
-import { VictoryTheme, VictoryClipContainer, VictoryPortal, VictoryLegend } from "victory-core";
+import {
+  VictoryTheme, VictoryClipContainer, VictoryPortal, VictoryLegend, VictoryTooltip
+} from "victory-core";
 
 export default class App extends React.Component {
   constructor() {
@@ -56,7 +58,7 @@ export default class App extends React.Component {
   }
 
   getData() {
-    return range(100).map((i) => {
+    return range(50).map((i) => {
       return {
         x: i + 20,
         y: Math.random()
@@ -147,6 +149,28 @@ export default class App extends React.Component {
             </VictoryPortal>
           </VictoryChart>
 
+          <VictoryChart style={{ parent: parentStyle }}
+            animate={{ duration: 1500 }}
+            domainPadding={{ x: 20, y: 0 }}
+            containerComponent={
+              <VictoryZoomContainer
+                minimumZoom={{ x: 5 }}
+                dimension="x"
+                clipContainerComponent={
+                  <VictoryClipContainer clipPadding={{ top: 15, bottom: 15 }}/>
+                }
+              />
+            }
+          >
+            <VictoryScatter
+              style={{ parent: parentStyle, data: { fill: "orange" } }}
+              size={15}
+              data={this.state.data}
+              labels={(d) => d.x}
+              labelComponent={<VictoryTooltip/>}
+            />
+          </VictoryChart>
+
           <VictoryChart
             style={{ parent: parentStyle }}
             containerComponent={<VictoryZoomContainer/>}

src/components/containers/victory-zoom-container.js

@@ -105,29 +105,22 @@ export const zoomContainerMixin = (base) => class VictoryZoomContainer extends b
     const plottableWidth = Math.abs(rangeX[0] - rangeX[1]);
     const plottableHeight = Math.abs(rangeY[0] - rangeY[1]);
     const radius = Math.max(...rangeY);
-    const makeGroup = (child, index) => {
-      return React.cloneElement(clipContainerComponent, {
-        key: `ZoomClipContainer-${index}`,
-        clipWidth: plottableWidth,
-        clipHeight: plottableHeight,
-        translateX: Math.min(...rangeX),
-        translateY: Math.min(...rangeY),
-        children: child,
-        polar,
-        origin: polar ? origin : undefined,
-        radius: polar ? radius : undefined,
-        ...clipContainerComponent.props
-      });
-    };
-    return React.Children.toArray(children).map((child, index) => {
+    const groupComponent = React.cloneElement(clipContainerComponent, {
+      clipWidth: plottableWidth,
+      clipHeight: plottableHeight,
+      translateX: Math.min(...rangeX),
+      translateY: Math.min(...rangeY),
+      polar,
+      origin: polar ? origin : undefined,
+      radius: polar ? radius : undefined,
+      ...clipContainerComponent.props
+    });
+    return React.Children.toArray(children).map((child) => {
       const role = child && child.type && child.type.role;
       if (role === "axis" || role === "legend" || role === "label") {
         return child;
-      } else if (role === "portal") {
-        const group = makeGroup(child.props.children, index);
-        return React.cloneElement(child, { children: group, key: `ZoomPortal-${index}` });
       } else {
-        return makeGroup(child, index);
+        return React.cloneElement(child, { groupComponent });
       }
     });
   }
@@ -170,8 +163,7 @@ export const zoomContainerMixin = (base) => class VictoryZoomContainer extends b
     //eslint-disable-next-line max-statements
     return childComponents.map((child) => {
       const role = child && child.type && child.type.role;
-      const currentChild = role === "portal" ?
-        React.Children.toArray(child.props.children)[0] : child;
+      const currentChild = child;
       const { currentDomain, zoomActive, allowZoom } = props;
       const originalDomain = defaults({}, props.originalDomain, props.domain);
       const zoomDomain = defaults({}, props.zoomDomain, props.domain);
@@ -205,7 +197,7 @@ export const zoomContainerMixin = (base) => class VictoryZoomContainer extends b
             undefined : this.downsampleZoomData(props, currentChild.props, newDomain)
         }, currentChild.props)
       );
-      return role === "portal" ? React.cloneElement(child, { children: newChild }) : newChild;
+      return newChild;
     });
   }