Arrow style transition: all causes glitchy animation when the arrow changes direction

[sompylasar]

Why is this transition needed? I've managed to disable it via arrowStyle override, and nothing's broken, the glitch fixed.

[Redmega]

@sompylasar Can you recreate on CodeSandbox for testing?

[sompylasar]

Wow 8 months ago... I haven't touched that part of the app for months. I'll try to reproduce, but no promises.

[Redmega]

Oh, sorry! Didn't see the open date for the issue. I'll try to reproduce after work, no big deal. I'm just trying to understand the use case.

Were you changing the arrow from left to right for example, on the same tooltip, or is it between two tooltips with different arrows?

[sompylasar]

On the same tooltip. See the repro screen recording (sorry for the low FPS but the glitch is visible):

Here's the code:

  render() {
    const [ Anchor, TooltipContent ] = this.props.children;

    const {
      tooltipWrapStyle,
      tooltipStyle,
      tooltipArrowStyle,
      tooltipPosition,
      tooltipTimeout,
      tooltipForceActive,
    } = this.props;

    const {
      tooltipId,
      isTooltipActive,
    } = this.state;

    const ConnectedAnchor = cloneElement( Anchor, {
      onMouseEnter: this._showTooltip,
      onMouseLeave: this._hideTooltip,
      onTouchTap: this._toggleTooltip,
      id: tooltipId,
    });

    const _tooltipContentStyle = {
      fontWeight: '600',
      fontSize: '13px',
      color: '#fff',
      textAlign: 'left',
    };

    const _tooltipStyle = {
      background: 'rgba(40, 40, 40, 0.9)',  // $rsh-tooltip-background-color
      boxShadow: 'none',
      borderRadius: '4px',
      padding: '8px',
      lineHeight: '16px',
      ..._tooltipContentStyle,
      ...tooltipStyle,
    };

    // NOTE: `react-portal-tooltip` won't let the arrow's width / height / border-radius to be styled.
    const _tooltipArrowStyle = {
      color: 'rgba(40, 40, 40, 0.9)',  // $rsh-tooltip-background-color
      borderColor: null,
      // WORKAROUND(@sompylasar): Disable arrow transition, otherwise the animation looks glitchy when the arrow direction changes.
      //transition: null,   //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
      ...tooltipArrowStyle,
    };

    const reactPortalTooltipStyle = {
      style: _tooltipStyle,
      arrowStyle: _tooltipArrowStyle,
    };

    return (
      <div style={ tooltipWrapStyle }>
        { ConnectedAnchor }
        <ReactPortalTooltip
          active={typeof tooltipForceActive === 'boolean'
            ? tooltipForceActive
            : isTooltipActive
          }
          position={tooltipPosition}
          arrow="center"
          style={reactPortalTooltipStyle}
          parent={`#${tooltipId}`}
          tooltipTimeout={typeof tooltipForceActive === 'boolean' ? 0 : tooltipTimeout}
        >
          <div style={_tooltipContentStyle}>
            { TooltipContent }
          </div>
        </ReactPortalTooltip>
      </div>
    );
  }