Detect click outside React component

Question

I m looking for a way to detect if a click event happened outside of a component  as described in this article  jQuery closest   is used to see if the target from a click event has the dom element as one of its parents  If there is a match the click event belongs to one of the children and is thus not considered to be outside of the component  So in my component I want to attach a click handler to window  When the handler fires I need to compare the target with the dom children of my component  The click event contains properties like  quot path quot  which seems to hold the dom path that the event has travelled  I m not sure what to compare or how to best traverse it  and I m thinking someone must have already put that in a clever utility function    No

User · Answer

You could just install a double click handler on the body and another one on this element. In the handler of this element just return false to prevent the event from propagating. So when a double click happens if it is on the element it will be caught and will not propagate to the handler on the body. Otherwise it will be caught by the handler on the body.

Update: if you really do not want to prevent event propagation, you just need to use closest to check whether the click happened on your element or one of his children:

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).on('click', function(event) {
    if (!$(event.target).closest('#div3').length) {
    alert("outside");
    }
});
</script>
</head>
<body>
    <div style="background-color:blue;width:100px;height:100px;" id="div1"></div>
    <div style="background-color:red;width:100px;height:100px;" id="div2"></div>
    <div style="background-color:green;width:100px;height:100px;" id="div3"></div>
    <div style="background-color:yellow;width:100px;height:100px;" id="div4"></div>
    <div style="background-color:grey;width:100px;height:100px;" id="div5"></div>
</body>
</html>

Update: without jQuery:

<html>
<head>
<script>
function findClosest (element, fn) {
  if (!element) return undefined;
  return fn(element) ? element : findClosest(element.parentElement, fn);
}
document.addEventListener("click", function(event) {
    var target = findClosest(event.target, function(el) {
        return el.id == 'div3'
    });
    if (!target) {
        alert("outside");
    }
}, false);
</script>
</head>
<body>
    <div style="background-color:blue;width:100px;height:100px;" id="div1"></div>
    <div style="background-color:red;width:100px;height:100px;" id="div2"></div>
    <div style="background-color:green;width:100px;height:100px;" id="div3">
        <div style="background-color:pink;width:50px;height:50px;" id="div6"></div>
    </div>
    <div style="background-color:yellow;width:100px;height:100px;" id="div4"></div>
    <div style="background-color:grey;width:100px;height:100px;" id="div5"></div>
</body>
</html>

User · Answer

I found this from the article below   render         return            this node   node                                Toggle Popover                   this state popupVisible  amp  amp                          I m a popover                                              Here is a great article about this issue   Handle clicks outside of React components  https   larsgraubner com handle-outside-clicks-react

User · Answer

The Ez way    const componentRef   useRef     useEffect      gt        document addEventListener  quot click quot   handleClick       return      gt  document removeEventListener  quot click quot   handleClick       function handleClick e  any            if componentRef  amp  amp  componentRef current               const ref  any   componentRef current             if  ref contains e target                       put your action here                                        then put the ref on your component  lt div ref  componentRef as any  gt  My Component  lt  div gt

User · Answer

For those who need absolute positioning  a simple option I opted for is to add a wrapper component that is styled to cover the whole page with a transparent background  Then you can add an onClick on this element to close your inside component     lt div style            position   fixed           top   0   right   0   bottom   0   left   0           zIndex   1000            onClick       gt  handleOutsideClick     gt       lt Content style   position   absolute     gt   lt  div gt    As it is right now if you add a click handler on content  the event will also be propagated to the upper div and therefore trigger the handlerOutsideClick  If this is not your desired behavior  simply stop the event progation on your handler    lt Content style   position   absolute    onClick  e   gt                                              e stopPropagation                                              desiredFunctionCall                                                gt

User · Answer

My biggest concern with all of the other answers is having to filter click events from the root parent down   I found the easiest way was to simply set a sibling element with position  fixed  a z-index 1 behind the dropdown and handle the click event on the fixed element inside the same component   Keeps everything centralized to a given component   Example code   HTML  lt div className  parent  gt     lt div className   dropdown   this state open   open         gt         content    lt  div gt     lt div className  outer-handler  onClick       gt  this setState  open  false    gt     lt  div gt   lt  div gt    SASS  dropdown     display  none    position  absolute    top  0px    left  0px    z-index  100     amp  open       display  block         outer-handler       position  fixed      top  0      left  0      right  0      bottom  0      opacity  0      z-index  99      display  none       amp  open         display  block

User · Answer

Update  Solution with React  16 8 using Hooks  CodeSandbox  import React    useEffect  useRef  useState   from  react    const SampleComponent        gt        const  clickedOutside  setClickedOutside    useState false       const myRef   useRef         const handleClickOutside   e   gt            if   myRef current contains e target                 setClickedOutside true                         const handleClickInside        gt  setClickedOutside false        useEffect      gt            document addEventListener  mousedown   handleClickOutside           return      gt  document removeEventListener  mousedown   handleClickOutside                return            lt button ref  myRef  onClick  handleClickInside  gt               clickedOutside    Bye      Hello             lt  button gt             export default SampleComponent      Solution with React  16 3   CodeSandbox  import React    Component   from  react    class SampleComponent extends Component     state         clickedOutside  false         componentDidMount         document addEventListener  mousedown   this handleClickOutside          componentWillUnmount         document removeEventListener  mousedown   this handleClickOutside          myRef   React createRef       handleClickOutside   e   gt        if   this myRef current contains e target           this setState   clickedOutside  true                   handleClickInside        gt  this setState   clickedOutside  false        render         return          lt button ref  this myRef  onClick  this handleClickInside  gt           this state clickedOutside    Bye      Hello           lt  button gt                export default SampleComponent

User · Answer

UseOnClickOutside Hook - React 16 8    Create a general useOnOutsideClick function  export const useOnOutsideClick   handleOutsideClick   gt      const innerBorderRef   useRef       const onClick   event   gt        if         innerBorderRef current  amp  amp         innerBorderRef current contains event target                handleOutsideClick                  useMountEffect      gt        document addEventListener  click   onClick  true       return      gt          document removeEventListener  click   onClick  true                   return   innerBorderRef        const useMountEffect   fun   gt  useEffect fun         Then use the hook in any functional component    const OutsideClickDemo      currentMode  changeContactAppMode      gt       const  open  setOpen    useState false     const   innerBorderRef     useOnOutsideClick      gt  setOpen false       return        lt div gt         lt button onClick       gt  setOpen true   gt open lt  button gt         open  amp  amp             lt div ref  innerBorderRef  gt              lt SomeChild  gt           lt  div gt                lt  div gt             Link to demo  Partially inspired by  pau1fitzgerald answer

User · Answer

Hook implementation based on Tanner Linsley s excellent talk at JSConf Hawaii 2020  useOuterClick Hook API const Client        gt      const innerRef   useOuterClick ev   gt     what you want to do on outer click        return  lt div ref  innerRef  gt  Inside  lt  div gt       Implementation function useOuterClick callback      const callbackRef   useRef       initialize mutable callback ref   const innerRef   useRef       returned to client  who sets the  quot border quot  element       update callback on each render  so second useEffect has most recent callback   useEffect      gt    callbackRef current   callback        useEffect      gt        document addEventListener  quot click quot   handleClick       return      gt  document removeEventListener  quot click quot   handleClick       function handleClick e          if  innerRef current  amp  amp  callbackRef current  amp  amp            innerRef current contains e target          callbackRef current e                      no dependencies - gt  stable click listener          return innerRef     convenience for client  doesn t need to init ref himself      Here is a working example   x000D   x000D       Custom Hook    function useOuterClick callback      const innerRef   useRef      const callbackRef   useRef          set current callback in ref  before second useEffect uses it   useEffect      gt       useEffect wrapper to be safe for concurrent mode     callbackRef current   callback           useEffect      gt        document addEventListener  click   handleClick       return      gt  document removeEventListener  click   handleClick           read most recent callback and innerRef dom node from refs     function handleClick e          if           innerRef current  amp  amp           callbackRef current  amp  amp           innerRef current contains e target                    callbackRef current e                              no need for callback   innerRef dep      return innerRef     return ref  client can omit  useRef          Usage     const Client        gt      const  counter  setCounter    useState 0     const innerRef   useOuterClick e   gt           counter state is up-to-date  when handler is called     alert  Clicked outside  Increment counter to   counter   1         setCounter c   gt  c   1           return        lt div gt         lt p gt Click outside  lt  p gt         lt div id  container  ref  innerRef  gt          Inside  counter   counter         lt  div gt       lt  div gt           ReactDOM render  lt Client   gt   document getElementById  root     x000D   container   border  1px solid red  padding  20px    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 12 0 umd react production min js  integrity  sha256-Ef0vObdWpkMAnxp39TYSLVS vVUokDE8CDFnx7tjY6U   crossorigin  anonymous  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 12 0 umd react-dom production min js  integrity  sha256-p2yuFdE8hNZsQ31Qk s8N Me2fL5cc6NKXOC0U9uGww   crossorigin  anonymous  gt  lt  script gt   lt script gt  var  useRef  useEffect  useCallback  useState    React lt  script gt   lt div id  root  gt  lt  div gt  x000D   x000D   x000D   Explanation useOuterClick makes use of mutable refs to create a lean API for the Client  A callback can be set without having to memoize it via useCallback  The callback body still has access to the most recent props and state  no stale closure values   Note for iOS users iOS treats only certain elements as clickable  To circumvent this behavior  choose a different outer click listener than document - nothing upwards including body  E g  you could add a listener on the React root div in above example and expand its height  height  100vh or similar  to catch all outside clicks  Source  quirksmode org

User · Answer

Refs usage in React 16 3  changed  The following solution uses ES6 and follows best practices for binding as well as setting the ref through a method  To see it in action   Class Implementation Hooks Implementation  Class Implementation  import React    Component   from  react   import PropTypes from  prop-types           Component that alerts if you click outside of it     export default class OutsideAlerter extends Component       constructor props            super props            this wrapperRef   React createRef            this setWrapperRef   this setWrapperRef bind this           this handleClickOutside   this handleClickOutside bind this              componentDidMount             document addEventListener  mousedown   this handleClickOutside              componentWillUnmount             document removeEventListener  mousedown   this handleClickOutside                         Alert if clicked on outside of element             handleClickOutside event            if  this wrapperRef  amp  amp   this wrapperRef current contains event target                 alert  You clicked outside of me                          render             return  lt div ref  this wrapperRef  gt  this props children  lt  div gt            OutsideAlerter propTypes         children  PropTypes element isRequired      Hooks Implementation  import React    useRef  useEffect   from  quot react quot           Hook that alerts clicks outside of the passed ref     function useOutsideAlerter ref        useEffect      gt                           Alert if clicked on outside of element                     function handleClickOutside event                if  ref current  amp  amp   ref current contains event target                     alert  quot You clicked outside of me  quot                                        Bind the event listener         document addEventListener  quot mousedown quot   handleClickOutside           return      gt                   Unbind the event listener on clean up             document removeEventListener  quot mousedown quot   handleClickOutside                      ref              Component that alerts if you click outside of it     export default function OutsideAlerter props        const wrapperRef   useRef null       useOutsideAlerter wrapperRef        return  lt div ref  wrapperRef  gt  props children  lt  div gt

User · Answer

This already has many answers but they don t address e stopPropagation   and preventing clicking on react links outside of the element you wish to close   Due to the fact that React has it s own artificial event handler you aren t able to use document as the base for event listeners  You need to e stopPropagation   before this as React uses document itself  If you use for example document querySelector  body   instead  You are able to prevent the click from the React link  Following is an example of how I implement click outside and close  This uses ES6 and React 16 3   import React    Component   from  react    class App extends Component     constructor props        super props        this state           isOpen  false              this insideContainer   React createRef           componentWillMount         document querySelector  body   addEventListener  click   this handleClick  false          componentWillUnmount         document querySelector  body   removeEventListener  click   this handleClick  false          handleClick e           Check that we ve clicked outside of the container and that it is open        if   this insideContainer current contains e target   amp  amp  this state isOpen     true          e preventDefault          e stopPropagation          this setState           isOpen  false                         togggleOpenHandler e        e preventDefault         this setState         isOpen   this state isOpen                render        return         lt div gt           lt span ref  this insideContainer  gt             lt a href   open-container  onClick   e    gt  this togggleOpenHandler e   gt Open me lt  a gt           lt  span gt           lt a href     onClick     clickHandler      gt            Will not trigger a click when inside is open           lt  a gt         lt  div gt                export default App

User · Answer

To extend on the accepted answer made by Ben Bud  if you are using styled-components  passing refs that way will give you an error such as  this wrapperRef contains is not a function    The suggested fix  in the comments  to wrap the styled component with a div and pass the ref there  works  Having said that  in their docs they already explain the reason for this and the proper use of refs within styled-components      Passing a ref prop to a styled component will give you an instance of the StyledComponent wrapper  but not to the underlying DOM node  This is due to how refs work  It s not possible to call DOM methods  like focus  on our wrappers directly    To get a ref to the actual  wrapped DOM node  pass the callback to the innerRef prop instead    Like so    lt StyledDiv innerRef  el   gt    this el   el      gt    Then you can access it directly within the  handleClickOutside  function   handleClickOutside   e   gt        if  this el  amp  amp   this el contains e target             console log  clicked outside             This also applies for the  onBlur  approach   componentDidMount        this el focus     blurHandler        gt        console log  clicked outside     render        return           lt StyledDiv             onBlur  this blurHandler              tabIndex  0              innerRef  el   gt    this el   el              gt

User · Answer

None of the other answers here worked for me  I was trying to hide a popup on blur  but since the contents were absolutely positioned  the onBlur was firing even on the click of inner contents too   Here is an approach that did work for me      Inside the component  onBlur event           currentTarget refers to this component         relatedTarget refers to the element where the user clicked  or focused  which        triggered this event         So in effect  this condition checks if the user clicked outside the component      if   event currentTarget contains event relatedTarget                do your thing             Hope this helps

User · Answer

Alternatively to  contains  you can use the  closest method  When you want to check if a click was outside of the element with id  quot apple quot  then i can use  const isOutside    e target closest  quot  apple quot     This checks if any element in the tree above the clicked one has an id of  quot apple quot   We have to negate the result

User · Answer

I used this module  I have no association with the author   npm install react-onclickout --save    x000D   x000D  const ClickOutHandler   require  react-onclickout    x000D    x000D  class ExampleComponent extends React Component   x000D    x000D    onClickOut e    x000D      if  hasClass e target   ignore-me    return  x000D      alert  user clicked outside of the component     x000D      x000D    x000D    render     x000D      return   x000D         lt ClickOutHandler onClickOut  this onClickOut  gt  x000D           lt div gt Click outside of me  lt  div gt  x000D         lt  ClickOutHandler gt  x000D         x000D      x000D    x000D   x000D   x000D    It did the job nicely

User · Answer

I know this is an old question  but I keep coming across this and I had a lot of trouble figuring this out in a simple format  So if this would make anyones life a bit easier  use OutsideClickHandler by airbnb  It is a the simplest plugin to accomplish this task without writing your own code    Example   hideresults       this setState  show false     render     return    lt div gt  lt div onClick       gt  this setState  show true    gt SHOW lt  div gt    this state show    lt OutsideClickHandler onOutsideClick       gt      this hideresults      gt   lt div className  insideclick  gt  lt  div gt   lt  OutsideClickHandler gt   null  lt  div gt

User · Answer

If you want to use a tiny component  466 Byte gzipped  that already exists for this functionality then you can check out this library react-outclick   The good thing about the library is that it also lets you detect clicks outside of a component and inside of another  It also supports detecting other types of events

User · Answer

componentWillMount       document addEventListener  mousedown   this handleClickOutside     handleClickOutside event       if event path 0  id      your-button         this setState  showWhatever  false           Event path 0  is the last item clicked

User · Answer

I found a solution thanks to Ben Alpert on discuss reactjs org  The suggested approach attaches a handler to the document but that turned out to be problematic  Clicking on one of the components in my tree resulted in a rerender which removed the clicked element on update  Because the rerender from React happens before the document body handler is called  the element was not detected as  inside  the tree   The solution to this was to add the handler on the application root element    main   window   myapp container   document getElementById  app   React render  lt App  gt   window   myapp container    component   import   Component  PropTypes   from  react   import ReactDOM from  react-dom    export default class ClickListener extends Component      static propTypes         children  PropTypes node isRequired      onClickOutside  PropTypes func isRequired        componentDidMount          window   myapp container addEventListener  click   this handleDocumentClick         componentWillUnmount          window   myapp container removeEventListener  click   this handleDocumentClick            using fat arrow to bind to instance      handleDocumentClick    evt    gt        const area   ReactDOM findDOMNode this refs area        if   area contains evt target           this props onClickOutside evt               render          return          lt div ref  area  gt          this props children         lt  div gt

User · Answer

I was stuck on the same issue  I am a bit late to the party here  but for me this is a really good solution  Hopefully it will be of help to someone else  You need to import findDOMNode from react-dom  import ReactDOM from  react-dom             componentDidMount         document addEventListener  click   this handleClickOutside  true      componentWillUnmount         document removeEventListener  click   this handleClickOutside  true      handleClickOutside   event   gt        const domNode   ReactDOM findDOMNode this        if   domNode     domNode contains event target             this setState               visible  false                         React Hooks Approach  16 8     You can create a reusable hook called useComponentVisible   import   useState  useEffect  useRef   from  react    export default function useComponentVisible initialIsVisible        const  isComponentVisible  setIsComponentVisible    useState initialIsVisible       const ref   useRef null        const handleClickOutside    event    gt            if  ref current  amp  amp   ref current contains event target                 setIsComponentVisible false                         useEffect      gt            document addEventListener  click   handleClickOutside  true           return      gt                document removeEventListener  click   handleClickOutside  true                           return   ref  isComponentVisible  setIsComponentVisible        Then in the component you wish to add the functionality to do the following   const DropDown        gt        const   ref  isComponentVisible     useComponentVisible true       return           lt div ref  ref  gt             isComponentVisible  amp  amp    lt p gt Dropdown Component lt  p gt            lt  div gt              Find a codesandbox example here

User · Answer

https   stackoverflow com a 42234988 9536897 it s not work on mobile mode  than you can try       returns true if the element or one of its parents has the class classname   hasSomeParentTheClass element  classname        if element target      element element target           if  element className amp  amp  element className split  quot   quot   indexOf classname   gt   0  return true      return         element parentNode  amp  amp        this hasSomeParentTheClass element parentNode  classname                componentDidMount         const fthis   this         window  click function  element          if   fthis hasSomeParentTheClass element   quot myClass quot            fthis setState   pharmacyFocus  null                   On the view  gave className to your specific element

User · Answer

Non of the above answers worked for me so here is what I did eventually   import React    Component   from  react           Component that alerts if you click outside of it     export default class OutsideAlerter extends Component     constructor props        super props        this handleClickOutside   this handleClickOutside bind this          componentDidMount         document addEventListener  mousedown   this handleClickOutside          componentWillUnmount         document removeEventListener  mousedown   this handleClickOutside                   Alert if clicked on outside of element         handleClickOutside event        if   event path     event path filter item   gt  item className   classOfAComponent   length          alert  You clicked outside of me                  render         return  lt div gt  this props children  lt  div gt          OutsideAlerter propTypes       children  PropTypes element isRequired

User · Answer

After trying many methods here  I decided to use github com Pomax react-onclickoutside because of how complete it is   I installed the module via npm and imported it into my component   import onClickOutside from  react-onclickoutside    Then  in my component class I defined the handleClickOutside method   handleClickOutside        gt      console log  onClickOutside   method called       And when exporting my component I wrapped it in onClickOutside     export default onClickOutside NameOfComponent    That s it

User · Answer

import   useClickAway   from  react-use    useClickAway ref       gt  console log  OUTSIDE CLICKED

User · Answer

Add an onClick handler to your top level container and increment a state value whenever the user clicks within  Pass that value to the relevant component and whenever the value changes you can do work   In this case we re calling this closeDropdown   whenever the clickCount value changes   The incrementClickCount method fires within the  app container but not the  dropdown because we use event stopPropagation   to prevent event bubbling   Your code may end up looking something like this   class App extends Component       constructor props            super props           this state                 clickCount  0                      incrementClickCount        gt            this setState               clickCount  this state clickCount   1                       render             return                lt div className  app  onClick  this incrementClickCount  gt                   lt Dropdown clickCount  this state clickCount   gt               lt  div gt                     class Dropdown extends Component       constructor props            super props           this state                 open  false                      componentDidUpdate prevProps            if  this props clickCount     prevProps clickCount                this closeDropdown                        toggleDropdown   event   gt            event stopPropagation            return  this state open    this closeDropdown     this openDropdown              render             return                lt div className  dropdown  onClick  this toggleDropdown  gt                                   lt  div gt

User · Answer

Here is the solution that best worked for me without attaching events to the container   Certain HTML elements can have what is known as  focus   for example input elements  Those elements will also respond to the blur event  when they lose that focus    To give any element the capacity to have focus  just make sure its tabindex attribute is set to anything other than -1  In regular HTML that would be by setting the tabindex attribute  but in React you have to use tabIndex  note the capital I    You can also do it via JavaScript with element setAttribute  tabindex  0   This is what I was using it for  to make a custom DropDown menu   var DropDownMenu   React createClass       getInitialState  function            return               expanded  false                      expand  function            this setState  expanded  true               collapse  function            this setState  expanded  false               render  function            if this state expanded               var dropdown          the dropdown content           else               var dropdown   undefined                     return                lt div className  dropDownMenu  tabIndex  0  onBlur   this collapse    gt                   lt div className  currentValue  onClick  this expand  gt                       this props displayValue                   lt  div gt                   dropdown               lt  div gt

User · Answer

An example with Strategy  I like the provided solutions that use to do the same thing by creating a wrapper around the component   Since this is more of a behavior I thought of Strategy and came up with the following     I m new with React and I need a bit of help in order to save some boilerplate in the use cases    Please review and tell me what you think   ClickOutsideBehavior  import ReactDOM from  react-dom    export default class ClickOutsideBehavior      constructor  component  appContainer  onClickOutside             Can I extend the passed component s lifecycle events from here      this component   component      this appContainer   appContainer      this onClickOutside   onClickOutside         enable          this appContainer addEventListener  click   this handleDocumentClick          disable          this appContainer removeEventListener  click   this handleDocumentClick          handleDocumentClick    event    gt         const area   ReactDOM findDOMNode this component        if   area contains event target             this onClickOutside event                Sample Usage  import React   Component  from  react   import  APP CONTAINER  from     const   import ClickOutsideBehavior from     ClickOutsideBehavior    export default class AddCardControl extends Component      constructor         super         this state           toggledOn  false        text                 this clickOutsideStrategy   new ClickOutsideBehavior         component  this        appContainer  APP CONTAINER        onClickOutside       gt  this toggleState false                 componentDidMount           this setState  toggledOn    this props toggledOn        this clickOutsideStrategy enable           componentWillUnmount          this clickOutsideStrategy disable           toggleState isOn         this setState  toggledOn  isOn           render             Notes  I thought of storing the passed component lifecycle hooks and override them with methods simillar to this   const baseDidMount   component componentDidMount   component componentDidMount        gt      this enable      baseDidMount call component      component is the component passed to the constructor of ClickOutsideBehavior  This will remove the enable disable boilerplate from the user of this behavior but it doesn t look very nice though

User · Answer

Bit late to the party  but I was having issues getting any of these to work with a React Select dropdown as the option clicked would no longer be contained within the parent I was looking to click out of by the time onClick was fired   I got round this issue by using   componentDidMount         document addEventListener  mousedown   this onClick       componentWillUnmount         document removeEventListener  mousedown   this onClick       onClick    event    gt        if  event path includes this detectOutsideClicksDiv                Do stuff here

User · Answer

In my DROPDOWN case the Ben Bud s solution worked well  but I had a separate toggle button with an onClick handler  So the outside clicking logic conflicted with the button onClick toggler  Here is how I solved it by passing the button s ref as well   import React    useRef  useEffect  useState   from  react           Hook that triggers onClose when clicked outside of ref and buttonRef elements     function useOutsideClicker ref  buttonRef  onOutsideClick      useEffect      gt         function handleClickOutside event             clicked on the element itself          if  ref current  amp  amp   ref current contains event target             return                    clicked on the toggle button          if  buttonRef current  amp  amp   buttonRef current contains event target             return                    If it s something else  trigger onClose          onOutsideClick                  Bind the event listener     document addEventListener  mousedown   handleClickOutside       return      gt             Unbind the event listener on clean up       document removeEventListener  mousedown   handleClickOutside                ref              Component that alerts if you click outside of it     export default function DropdownMenu props      const wrapperRef   useRef null     const buttonRef   useRef null     const  dropdownVisible  setDropdownVisible    useState false      useOutsideClicker wrapperRef  buttonRef  closeDropdown      const toggleDropdown        gt  setDropdownVisible visible   gt   visible      const closeDropdown        gt  setDropdownVisible false      return        lt div gt         lt button onClick  toggleDropdown  ref  buttonRef  gt Dropdown Toggler lt  button gt         dropdownVisible  amp  amp   lt div ref  wrapperRef  gt  props children  lt  div gt        lt  div gt

User · Answer

I like the  Ben Bud s answer but when there are visually nested elements  contains event target  not works as expected  So sometimes it s better to calculate the clicked point is visually inside of the element or not  Here is my React Hook code for the situation  import   useEffect   from  react   export function useOnClickRectOutside ref  handler      useEffect      gt        const listener    event    gt          const targetEl   ref current       if  targetEl            const clickedX   event clientX         const clickedY   event clientY         const rect   targetEl getBoundingClientRect           const targetElTop   rect top         const targetElBottom   rect top   rect height         const targetElLeft   rect left         const targetElRight   rect left   rect width          if                check X Coordinate           targetElLeft  lt  clickedX  amp  amp            clickedX  lt  targetElRight  amp  amp               check Y Coordinate           targetElTop  lt  clickedY  amp  amp            clickedY  lt  targetElBottom                       return                       trigger event when the clickedX Y is outside of the targetEl         handler event                     document addEventListener  mousedown   listener      document addEventListener  touchstart   listener       return      gt          document removeEventListener  mousedown   listener        document removeEventListener  touchstart   listener              ref  handler

User · Answer

Alternatively  const onClickOutsideListener        gt        alert  quot click outside quot       document removeEventListener  quot click quot   onClickOutsideListener            return      lt div     onMouseLeave       gt              document addEventListener  quot click quot   onClickOutsideListener                gt            lt  div gt

User · Answer

Typescript with Hooks Note  I m using React version 16 3  with React createRef   For other versions use the ref callback  Dropdown component  interface DropdownProps            export const Dropdown  React FC lt DropdownProps gt         const ref  React RefObject lt HTMLDivElement gt    React createRef         const handleClickOutside    event  MouseEvent    gt        if  ref  amp  amp  ref     null          const cur   ref current        if  cur  amp  amp   cur contains event target as Node                close all dropdowns                      useEffect      gt           Bind the event listener     document addEventListener  quot mousedown quot   handleClickOutside       return      gt             Unbind the event listener on clean up       document removeEventListener  quot mousedown quot   handleClickOutside                   return        lt div ref  ref  gt                   lt  div gt

User · Answer

I did this partly by following this and by following the React official docs on handling refs which requires react  16 3  This is the only thing that worked for me after trying some of the other suggestions here    class App extends Component     constructor props        super props       this inputRef   React createRef          componentWillMount         document addEventListener  quot mousedown quot   this handleClick  false         componentWillUnmount         document removeEventListener  quot mousedown quot   this handleClick  false         handleClick   e   gt          Validating click is made inside a component       if   this inputRef current     e target           return            this handleclickOutside           handleClickOutside          code to handle what to do when clicked outside         render        return         lt div gt           lt span ref  this inputRef    gt         lt  div gt

User · Answer

you can you a simple way to solve your problem   i show you          const  dropDwonStatus   setDropDownStatus    useState false   const openCloseDropDown        gt    setDropDownStatus prev   gt   prev     const closeDropDown       gt     if dropDwonStatus      setDropDownStatus false              lt parent onClick  closeDropDown  gt    lt child onClick  openCloseDropDown    gt   lt  parent gt    this works for me   good luck

User · Answer

If you want to use a tiny component  466 Byte gzipped  that already exists for this functionality then you can check out this library react-outclick  It captures events outside of a react component or jsx element   The good thing about the library is that it also lets you detect clicks outside of a component and inside of another  It also supports detecting other types of events

User · Answer

This is the method that suits me the best to make a dropdown menu  handleClick        gt        document getElementById  quot myDrop quot   classList toggle  quot showing quot       render          return            lt div className  quot courses quot  gt               lt div class  quot dropdownBody quot  gt                   lt button onClick  this handleClick  onBlur  this handleClick  class  quot dropbtn quot  gt Dropdown lt  button gt                   lt div id  quot myDrop quot  class  quot dropdown-content quot  gt                       lt a href  quot  home quot  gt Home lt  a gt                       lt a href  quot  about quot  gt About lt  a gt                       lt a href  quot  contact quot  gt Contact lt  a gt                   lt  div gt               lt  div gt           lt  div gt

User · Answer

To make the  focus  solution work for dropdown with event listeners you can add them with onMouseDown event instead of onClick  That way the event will fire and after that the popup will close like so    lt TogglePopupButton                     onClick     this toggleDropup                       tabIndex    0                      onBlur     this closeDropup                     gt                    this state isOpenedDropup  amp  amp                   lt ul className     dropupList   gt                        this props listItems map  item  i    gt                             lt li                             key     i                               onMouseDown     item eventHandler                            gt                                item itemName                           lt  li gt                                           lt  ul gt

User · Answer

I made a solution for all occasions   You should use a High Order Component to wrap the component that you would like to listen for clicks outside it   This component example has only one prop   onClickedOutside  that receives a function   ClickedOutside js   import React    Component   from  react    export default class ClickedOutside extends Component     componentDidMount         document addEventListener  mousedown   this handleClickOutside          componentWillUnmount         document removeEventListener  mousedown   this handleClickOutside          handleClickOutside   event   gt           IF exists the Ref of the wrapped component AND his dom children doesnt have the clicked component      if  this wrapperRef  amp  amp   this wrapperRef contains event target              A props callback for the ClikedClickedOutside       this props onClickedOutside                  render            In this piece of code I m trying to get to the first not functional component        Because it wouldn t work if use a functional component  like  lt Fade  gt  from react-reveal      let firstNotFunctionalComponent   this props children      while  typeof firstNotFunctionalComponent type      function           firstNotFunctionalComponent   firstNotFunctionalComponent props children                Here I m cloning the element because I have to pass a new prop  the  reference       const children   React cloneElement firstNotFunctionalComponent          ref  node   gt            this wrapperRef   node                    Keeping all the old props with the new element          firstNotFunctionalComponent props              return  lt React Fragment gt  children  lt  React Fragment gt

User · Answer

Here is my approach  demo - https   jsfiddle net agymay93 4     I ve created special component called WatchClickOutside and it can be used like  I assume JSX syntax     lt WatchClickOutside onClickOutside  this handleClose  gt     lt SomeDropdownEtc gt   lt  WatchClickOutside gt    Here is code of WatchClickOutside component   import React    Component   from  react    export default class WatchClickOutside extends Component     constructor props        super props       this handleClick   this handleClick bind this          componentWillMount         document body addEventListener  click   this handleClick          componentWillUnmount            remember to remove all events to avoid memory leaks     document body removeEventListener  click   this handleClick          handleClick event        const  container    this refs     get container that we ll wait to be clicked outside     const  onClickOutside    this props     get click outside callback     const  target    event     get direct click event target         if there is no proper callback - no point of checking     if  typeof onClickOutside      function           return                if target is container - container was not clicked outside        if container contains clicked target - click was not outside of it     if  target     container  amp  amp   container contains target           onClickOutside event      clicked outside - fire callback              render         return          lt div ref  container  gt           this props children         lt  div gt

User · Answer

Material-UI has a small component to solve this problem  https   material-ui com components click-away-listener  that you can cherry-pick it  It weights 1 5 kB gzipped  it supports mobile  IE 11 and portals

User · Answer

I had a case when I needed to insert children into the modal conditionally  Something like this  bellow  const  view  setView    useState VIEWS SomeView   return        lt Modal onClose  onClose  gt         VIEWS Result     view              lt Result onDeny       gt  setView VIEWS Details     gt            VIEWS Details     view              lt Details onDeny       gt  setView VIEWS Result    gt    gt            null       lt  Modal gt       So  parent contains event target  doesn t work here  because once you detach children  parent  modal  doesn t contain event target anymore  The solution I had  which works so far and have no any issue  is to write something like this  const listener    event  MouseEvent    gt       if  parentNodeRef  amp  amp   event path includes parentNodeRef   callback      If parent contained element from already detached tree  it wouldn t fire callback  EDIT  event path is new and doesn t exit in all browsers yet  Use compoesedPath instead

User · Answer

import ReactDOM from  react-dom     class SomeComponent      constructor props           First  add this to your constructor     this handleClickOutside   this handleClickOutside bind this          componentWillMount         document addEventListener  mousedown   this handleClickOutside  false              Unbind event on unmount to prevent leaks   componentWillUnmount         window removeEventListener  mousedown   this handleClickOutside  false          handleClickOutside event        if  ReactDOM findDOMNode this  contains event path 0            console log  OUTSIDE

[javascript] Detect click outside React component

Examples related to javascript

Examples related to dom

Examples related to reactjs