OverlayTrigger with delays can unintentionally leave overlays visible due to focus events.

[ElsewhereGames]

If you use a Tooltip with an OverlayTrigger and specify show and hide delays, there is a way to keep the tool-tip open indefinitely, even after the cursor leaves the OverlayTrigger: Mouse over the trigger, wait for the tool-tip to appear, then rapidly click and drag mouse the cursor off the component. I was able to reproduce this behavior in Chrome, Firefox, and Internet Explorer.

This behavior can be demonstrated using the sample code from the documentation:

const LinkWithTooltip = React.createClass({
  render() {
    let tooltip = <Tooltip>{this.props.tooltip}</Tooltip>;

    return (
      <OverlayTrigger placement='top' overlay={tooltip} delayShow={300} delayHide={150}>
        <a href={this.props.href}>{this.props.children}</a>
      </OverlayTrigger>
    );
  }
});

Place this link anywhere, click and drag off the link quickly, and the tooltip will remain open.

I dove into the OverlayTrigger code a bit, and it seems the mouse click triggers a call to handleDelayedShow() (since that gives the wrapped component focus), which sets the _hoverDelay property. When handleDelayedHide() is invoked right after, it will just call clearTimeout(this._hoverDelay) and return, thus keeping the tooltip visible.

I think this behavior can be disabled by only specifying hover as a trigger. Perhaps focus should not be a default trigger?

[mtscout6]

I was just looking over this code yesterday and had some reservations about it myself. We don't currently have unit tests around the hover and focus triggers, just click. Ideally we'd add some test coverage for the focus trigger, since the hover also uses the delayed mechanisms.

[mtscout6]

Changing the default behavior would be a breaking change, but I agree that hover is not ideal since it does not play well with accessibility.

[ElsewhereGames]

Yeah, I am not a fan of changing the default behavior myself. Perhaps updating the documentation can be done as a small first step? For instance, if there are elements which do not get focus when clicked (not sure if those exist) use those instead of an anchor element.

[mtscout6]

You're welcome to submit a pull request and we can address specifics there.

[ElsewhereGames]

Okiedoke, thanks!

[AlexKVal]

/cc @taion @jquense ?

[taion]

I wonder if we can use Transition to handle this. Should centralize this logic about state transitions if possible. This is annoying but not a blocker for v0.24.

[taion]

Actually, what's weirdest to me about this is that the tooltip goes away when you mouse off the link normally.

I mean, the link is still focused - why should it drop the tooltip at all until the link blurs?

[taion]

I'm not denying that this is buggy, BTW, but I don't think the bug is with the tooltip staying shown - it's with the tooltip hiding if you do this slowly.