Tooltip opens when isOpen prop changes from false to undefined

[SnowblindFatal]

Hi. I have a simple hover tooltip setup that breaks if I set isOpen to false (for during a certain drag action) and then undefined (after the drag is finished). That is, the tooltip opens on its own and never closes when I set isOpen to undefined. Hovering over the tooltip triggers the close event again. Some gifs should clarify this:

Current state of react-tooltip-lite:

After my fix:

So yeah, I've got a fix for this already (didn't have rights to push to my own branch and make a PR). Feel free to use this as is or give me the right to push to my own branch and make a PR. It's a bit hacky, but I familiarised myself with the codebase for a bit and figured this is probably the least painful way to do this.

In index.jsx:

  componentDidUpdate(prevProps, prevState) {
    ...
    if (this.props.isOpen === false && prevProps.isOpen !== this.props.isOpen) {
      this.hideTip();
    }

The props I'm giving to the Tooltip aren't anything special:

    content={TooltipArea(props)}
    padding="2px"
    background="#8899aa"
    tipContentHover={true}
    tipContentClassName="datatask-tooltip"
    mouseOutDelay={500}
    hoverDelay={500}
    arrow={false}
    direction="up-start"
    isOpen={props.dragUnderway ? false : undefined}
    className="tooltip-wrapper"

Cheers! :)

[bsidelinger912]

Hey @SnowblindFatal, when you pass undefined to isOpen, it falls back to the default behavior of showing the tip when you mouse over the target. Can you show me the JSX structure of what's around the tip? It might make sense to just use fully controlled mode where you use events to maintain state for whether the tip is open or not. I'll look a little more closely though when I have a chance.

[SnowblindFatal]

The thing is, through some logic, the tooltip lib calls the showTip() function when I start dragging (and set isOpen to false) and when I stop dragging and set isOpen to undefined, it thinks that the tooltip should be shown. The thing is, it is in a faulty state as the tooltip never goes away unless I hover over the tooltip or the original element, as this presumably restarts the delay timers. My guess is that when isOpen is set to false, the delay timers don't have an effect or something.

My code is just

export const WrappedTooltip = props => (
  <Tooltip
    content={TooltipArea(props)}
    padding="2px"
    background="#8899aa"
    tipContentHover={true}
    tipContentClassName="datatask-tooltip"
    mouseOutDelay={500}
    hoverDelay={500}
    arrow={false}
    direction="up-start"
    isOpen={props.dragUnderway ? false : undefined}
    className="tooltip-wrapper"
  >
    {props.children}
  </Tooltip>
);

and then

  render() {
    return (
      <DataTaskRoot
        onClick={e => {
          this.props.onSelectItem(this.props.task);
        }}
        backgroundColor={this.props.color}
        left={this.props.left}
        width={this.props.width}
        height={this.props.height}
        isSelected={this.props.isSelected}
      >
        <WrappedTooltip
          task={this.props.task}
          onUpdateTask={this.props.onUpdateTask}
          dragUnderway={this.props.dragUnderway}
        >
          <DataTaskInner>
            <DataTaskLinker left={-linkerSize} onMouseUp={this.endLink} />
            <DataTaskResizer floatLeft />
            <DataTaskContent>{this.props.task.name}</DataTaskContent>
            <DataTaskResizer />
            <DataTaskLinker left={this.props.width - 2 * linkerBorderWidth} onMouseDown={this.startLink} />
          </DataTaskInner>
        </WrappedTooltip>
      </DataTaskRoot>
    );
  }

I don't think this is that special.

[SnowblindFatal]

Hi. I would like to know if you're going to integrate the fix mentioned above.

I understand if you feel inclined to disregard it, but soon I will actually need it and I need to know if I'll continue using this lib with all its updates or just a custom fork.

Thank you!

[bsidelinger912]

Hey @SnowblindFatal, Can you write a test that captures the issue here, I cannot seem to reproduce it.