Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Detecting clicks outside of a tooltip – `handleOutsideClick` fires after unmounting (IE only)

See original GitHub issue

I’ve found a very specific scenario in which handleOutsideClick function is fired when the Tooltip component is unmounted.

In my web app (using react, redux and react-redux-router) I have a button which acts as a tooltip trigger (trigger mode is set to “click”) and a button which executes history.push. Due to the routing, navigating through the app using “push” won’t reenter the app but only unmounts some components and mounts another. In IE 11 when the user clicks on the second button when the tooltip is shown react unmounts parent component, buttons and hence the TooltipTrigger and the Tooltip components. The handleOutsideClick event handler is removed, but (only in IE) the code in the handler is executed which leads to exception because findDOMNode cannot be used on unmounted components.

In my opinion, the simplest solution is to check whether the component is mounted before calling findDOMNode. I don’t have any idea why the handler is called after removing the event listener.

Issue Analytics

State:
Created 5 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

mohsinulhaqcommented, Feb 23, 2019

Hi, I have released v2.8.1-alpha.1 with a check for mount state before findDOMNode on outside click. Please give it a spin and let me know if anything is missing.

0reactions

mohsinulhaqcommented, Mar 4, 2019

Fix now available in v2.8.1

Top Results From Across the Web

Detect click outside React component - Stack Overflow

So in my component, I want to attach a click handler to the window . When the handler fires I need to compare...

How to detect a click outside a React component

In this tutorial, learn a few ways how to implement click detection outside of both functional and class-based React components.

Creating An Outside Focus And Click Handler React Component

So far we saw how to use DOM's Node.contains API to detect click outside of an element. We can wrap that logic in...

[Solved]-Detect click outside React component-Reactjs

The incrementClickCount method fires within the .app container but not the .dropdown because we use event.stopPropagation() to prevent event bubbling. Your code ...

Detecting Click Outside a React Components - BOSC Tech Labs

Detecting an outside click of a functional component. Let's make an HTML tooltip by using the InfoBox React functional component. When the user ......