fix(core): only use <g> for popovers in within SVGs (#6530)

spinnaker · Feb 12, 2019 · 578a7fd · 578a7fd
1 parent ca60336
commit 578a7fd
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/app/scripts/modules/core/src/pipeline/config/graph/PipelineGraphNode.tsx b/app/scripts/modules/core/src/pipeline/config/graph/PipelineGraphNode.tsx
@@ -152,7 +152,12 @@ export class PipelineGraphNode extends React.Component<IPipelineGraphNodeProps>
 
     if (node.stage && node.stage.type === 'group') {
       NodeContents = (
-        <GroupExecutionPopover stage={node.stage} subStageClicked={this.subStageClicked} width={maxLabelWidth}>
+        <GroupExecutionPopover
+          stage={node.stage}
+          subStageClicked={this.subStageClicked}
+          width={maxLabelWidth}
+          svgMode={true}
+        >
           {NodeContents}
         </GroupExecutionPopover>
       );

diff --git a/app/scripts/modules/core/src/pipeline/config/stages/group/GroupExecutionPopover.tsx b/app/scripts/modules/core/src/pipeline/config/stages/group/GroupExecutionPopover.tsx
@@ -9,6 +9,7 @@ export interface IGroupExecutionPopoverProps {
   stage: IExecutionStageSummary;
   width: number;
   subStageClicked?: (groupStage: IExecutionStageSummary, stage: IExecutionStageSummary) => void;
+  svgMode?: boolean;
 }
 
 export interface IGroupedStageListItemProps {
@@ -55,7 +56,7 @@ export class GroupExecutionPopover extends React.Component<IGroupExecutionPopove
   };
 
   public render() {
-    const { stage, width } = this.props;
+    const { stage, width, svgMode } = this.props;
 
     const template = (
       <div style={{ minWidth: width - 30 + 'px' }}>
@@ -69,7 +70,13 @@ export class GroupExecutionPopover extends React.Component<IGroupExecutionPopove
     );
 
     return (
-      <HoverablePopover className="group-stages-list-popover" delayHide={50} placement="bottom" template={template}>
+      <HoverablePopover
+        className="group-stages-list-popover"
+        svgMode={svgMode}
+        delayHide={50}
+        placement="bottom"
+        template={template}
+      >
         {this.props.children}
       </HoverablePopover>
     );

diff --git a/app/scripts/modules/core/src/presentation/HoverablePopover.tsx b/app/scripts/modules/core/src/presentation/HoverablePopover.tsx
@@ -41,6 +41,7 @@ export interface IHoverablePopoverProps extends React.HTMLProps<any> {
 
   onShow?: () => void;
   onHide?: () => void;
+  svgMode?: boolean;
 }
 
 export interface IHoverablePopoverState {
@@ -58,11 +59,10 @@ export class HoverablePopover extends React.Component<IHoverablePopoverProps, IH
     delayHide: 300,
   };
 
-  private target: Element;
-
   private mouseEvents$ = new Subject<React.SyntheticEvent<any>>();
   private hidePopoverEvents$ = new Subject();
   private destroy$ = new Subject();
+  private targetRef = React.createRef<HTMLElement>();
 
   constructor(props: IHoverablePopoverProps) {
     super(props);
@@ -103,14 +103,10 @@ export class HoverablePopover extends React.Component<IHoverablePopoverProps, IH
     this.mouseEvents$.next(e);
   };
 
-  private refCallback = (ref: Element): void => {
-    this.target = ref;
-  };
-
   private rendererRefCallback = (ref: React.Component): void => {
     if (ref) {
       const { clientWidth, clientHeight } = ReactDOM.findDOMNode(ref) as Element;
-      const bounds = this.target.getBoundingClientRect();
+      const bounds = this.targetRef.current.getBoundingClientRect();
       const bottomSpace = window.innerHeight - bounds.bottom;
       const rightSpace = window.innerWidth - bounds.right;
 
@@ -133,9 +129,26 @@ export class HoverablePopover extends React.Component<IHoverablePopoverProps, IH
     }
   };
 
+  private Wrapper = ({ children, ...otherProps }: any) => {
+    const { svgMode } = this.props;
+    if (svgMode) {
+      return (
+        <g {...otherProps} ref={this.targetRef}>
+          {children}
+        </g>
+      );
+    }
+    return (
+      <div {...otherProps} ref={this.targetRef}>
+        {children}
+      </div>
+    );
+  };
+
   public render() {
     const { Component, template, placement, container, hOffsetPercent, id, title, className } = this.props;
     const { popoverIsOpen, animation, placementOverride } = this.state;
+    const { Wrapper } = this;
 
     const popoverContent: JSX.Element = Component ? (
       <Component {...this.props} hidePopover={() => this.hidePopoverEvents$.next()} />
@@ -144,18 +157,13 @@ export class HoverablePopover extends React.Component<IHoverablePopoverProps, IH
     );
 
     return (
-      <g
-        style={{ display: 'inline' }}
-        onMouseEnter={this.handleMouseEvent}
-        onMouseLeave={this.handleMouseEvent}
-        ref={this.refCallback}
-      >
+      <Wrapper style={{ display: 'inline' }} onMouseEnter={this.handleMouseEvent} onMouseLeave={this.handleMouseEvent}>
         {this.props.children}
         <Overlay
           show={popoverIsOpen}
           animation={animation}
           placement={placementOverride || placement}
-          target={this.target as any}
+          target={this.targetRef.current}
           container={container}
         >
           <PopoverOffset
@@ -170,7 +178,7 @@ export class HoverablePopover extends React.Component<IHoverablePopoverProps, IH
             {popoverContent}
           </PopoverOffset>
         </Overlay>
-      </g>
+      </Wrapper>
     );
   }
 }