Improve outside click handling

Author: hernansartorio

src/DatePicker.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import React, { useState } from 'react'
 import { func, instanceOf, object, objectOf, string } from 'prop-types'
 import useDateInput from './useDateInput'
 import useDetectTouch from './useDetectTouch'
@@ -21,10 +21,11 @@ export default function DatePicker({
   const [month, setMonth] = useState(date || new Date())
   const [focused, setFocused] = useState(false)
   const isTouch = useDetectTouch()
-  const inputRef = useRef()
 
-  const containerRef = useOutsideClickHandler(() => {
-    setFocused(false)
+  const [inputRef, popoverRef] = useOutsideClickHandler(() => {
+    if (focused) {
+      setFocused(false)
+    }
   })
 
   const inputProps = useDateInput({
@@ -45,7 +46,7 @@ export default function DatePicker({
   }
 
   return (
-    <div className='nice-dates' ref={containerRef}>
+    <div className='nice-dates'>
       {children({
         inputProps: {
           ...inputProps,
@@ -63,7 +64,7 @@ export default function DatePicker({
         focused
       })}
 
-      <Popover open={focused}>
+      <Popover open={focused} ref={popoverRef}>
         <DatePickerCalendar
           locale={locale}
           date={date}

src/DateRangePicker.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useState } from 'react'
 import { func, instanceOf, object, objectOf, string } from 'prop-types'
 import { addDays, subDays } from 'date-fns'
 import { isSelectable } from './utils'
@@ -26,10 +26,8 @@ export default function DateRangePicker({
   const [focus, setFocus] = useState()
   const [month, setMonth] = useState(startDate || endDate || new Date())
   const isTouch = useDetectTouch()
-  const startDateInputRef = useRef()
-  const endDateInputRef = useRef()
 
-  const containerRef = useOutsideClickHandler(() => {
+  const [startDateInputRef, endDateInputRef, popoverRef] = useOutsideClickHandler(() => {
     setFocus(null)
   })
 
@@ -60,7 +58,7 @@ export default function DateRangePicker({
   })
 
   return (
-    <div className='nice-dates' ref={containerRef}>
+    <div className='nice-dates'>
       {children({
         startDateInputProps: {
           ...startDateInputProps,
@@ -91,7 +89,7 @@ export default function DateRangePicker({
         focus
       })}
 
-      <Popover open={!!focus}>
+      <Popover open={!!focus} ref={popoverRef}>
         <DateRangePickerCalendar
           locale={locale}
           startDate={startDate}

src/Popover.js

@@ -2,11 +2,17 @@ import React from 'react'
 import { bool, node } from 'prop-types'
 import classNames from 'classnames'
 
-export default function Popover({ open, children }) {
-  return <div className={classNames('nice-dates-popover', { '-open': open })}>{children}</div>
-}
+const Popover = React.forwardRef(({ children, open }, ref) => (
+  <div className={classNames('nice-dates-popover', { '-open': open })} ref={ref}>
+    {children}
+  </div>
+))
+
+Popover.displayName = 'Popover'
 
 Popover.propTypes = {
   children: node,
   open: bool
 }
+
+export default Popover

src/useOutsideClickHandler.js

@@ -1,11 +1,17 @@
 import { useRef, useEffect } from 'react'
 
 export default function useOutsideClickHandler(callback) {
-  const ref = useRef()
+  const refA = useRef()
+  const refB = useRef()
+  const refC = useRef()
 
   useEffect(() => {
     const handleOutsideClick = event => {
-      if (!ref.current.contains(event.target)) {
+      if (
+        (!refA.current || !refA.current.contains(event.target)) &&
+        (!refB.current || !refB.current.contains(event.target)) &&
+        (!refC.current || !refC.current.contains(event.target))
+      ) {
         callback()
       }
     }
@@ -17,5 +23,5 @@ export default function useOutsideClickHandler(callback) {
     }
   }, [callback])
 
-  return ref
+  return [refA, refB, refC]
 }