HOC for closing an item when clicked outside. Useful for dropdowns and tooltips

withClickOutside.tsx

import * as React from 'react'
import hoistNonReactStatic from 'hoist-non-react-statics'
import { findDOMNode } from 'react-dom'

export interface WithClickOutsideProps {
  close: () => void
  containerElement?: React.RefObject<any>
}

const withClickOutside = <P extends WithClickOutsideProps>(
  WrappedComponent: React.ComponentType<P>
) => {
  class WithClickOutside extends React.Component<P> {
    static displayName: string

    public componentDidMount() {
      this.addOutsideClickHandler()
    }

    public componentWillUnmount() {
      this.removeOutsideClickHandler()
    }

    private handleOutsideClick: EventListener = event => {
      // potentially bad pattern:
      // https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage
      // probs fine:
      // https://github.com/facebook/react/issues/9217#issuecomment-287622539
      const node =
        (this.props.containerElement && this.props.containerElement.current) || findDOMNode(this)!

      if (!node.contains(event.target as Node)) {
        this.props.close()
      }
    }

    private addOutsideClickHandler = () => {
      if ('ontouchend' in window) {
        document.addEventListener('touchend', this.handleOutsideClick)
      } else {
        document.addEventListener('click', this.handleOutsideClick)
      }
    }

    private removeOutsideClickHandler = () => {
      document.removeEventListener('touchend', this.handleOutsideClick)
      document.removeEventListener('click', this.handleOutsideClick)
    }

    render() {
      return <WrappedComponent {...this.props} />
    }
  }

  WithClickOutside.displayName = `WithClickOutside(${WrappedComponent.displayName ||
    WrappedComponent.name ||
    'Component'})`

  return hoistNonReactStatic(WithClickOutside, WrappedComponent)
}

export default withClickOutside

Does this HOC eat refs? Or should it forward it?