title: React: Dropdown not closing on tap outside
body: <p>I have the following code I am using to create a dropdown list for some items:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from &quot;react&quot;
  import { connectRefinementList } from &quot;react-instantsearch-dom&quot;
  import PropTypes from &quot;prop-types&quot;
  
  const cx = label =&gt; `ais-DropdownRefinementList-${label}`
  
  class DropdownRefinementList extends Component {
    constructor(props) {
      super(props)
  
      this.state = {
        active: false,
        mobile: false,
      }
    }
  
    componentDidMount() {
      this.setState({
        mobile: /Mobi/.test(navigator.userAgent),
      })
    }
    capitalizeFirst(s) {
      return s.charAt(0).toUpperCase() + s.slice(1)
    }
    renderItem = (item, i) =&gt; (
      &lt;label key={i} className=&quot;ais-DropdownRefinementList-item-label&quot;&gt;
        &lt;input
          type=&quot;checkbox&quot;
          checked={item.isRefined}
          onChange={() =&gt; {
            this.selectItem(item)
          }}
        /&gt;
        &lt;span&gt;{item.label}&lt;/span&gt;
        &lt;span className={cx(&quot;item-count&quot;)}&gt; ({item.count})&lt;/span&gt;
      &lt;/label&gt;
    )
    selectItem = (item, resetQuery) =&gt; {
      this.props.refine(item.value)
    }
    handleEvent = e =&gt; {
      this.setState({ active: !this.state.active })
    }
    render() {
      const { items, attribute, hoverable, currentRefinement, icon } = this.props
      const { active, mobile } = this.state
      const title = this.capitalizeFirst(attribute)
      console.log(this.state)
      return (
        &lt;div
          className={`ais-DropdownRefinementList-container-${attribute}`}
          onMouseLeave={hoverable &amp;&amp; !mobile &amp;&amp; this.handleEvent}
          onMouseEnter={hoverable &amp;&amp; !mobile &amp;&amp; this.handleEvent}
        &gt;
          &lt;div className={cx(&quot;title-container&quot;)} onClick={this.handleEvent}&gt;
            &lt;span class=&quot;w-full focus:text-teal-500 hover:text-teal-500 justify-center inline-block text-gray-600 text-xl text-center &quot;&gt;
              {icon}
            &lt;/span&gt;
            &lt;span className=&quot;ais-DropdownRefinementList-title font-bold w-full text-gray-600&quot;&gt;
              {title}{&quot; &quot;}
            &lt;/span&gt;
          &lt;/div&gt;
          {active &amp;&amp; (
            &lt;div className={`ais-DropdownRefinementList-List ${attribute}`}&gt;
              {items.map(this.renderItem)}
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      )
    }
  }
  
  DropdownRefinementList.propTypes = {
    attribute: PropTypes.string.isRequired,
    icon: PropTypes.string.isRequired,
    hoverable: PropTypes.bool,
    limit: PropTypes.number,
  }
  DropdownRefinementList.defaultProps = {
    hoverable: false,
  }
  
  export default connectRefinementList(DropdownRefinementList)
  </code></pre>
  <p>On a laptop these work fine, and when I hover my mouse over the list title, the dropdown opens and when I leave, the dropdown closes. I had assumed that the same would happen when I was on mobile. However, this is not the case. One dropdown will remain open while the user clicks another. This is demonstrated below:</p>
  <p><a href="https://i.stack.imgur.com/7bzlm.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7bzlm.gif" alt="enter image description here" /></a></p>
  <p>This is despite having this the conditions for <code>onMouseLeave</code> and <code>onMouseEnter</code>. Is this not applicable to mobile devices? Shouldn't a tap outside the container hide it again, like it should?</p>
  <p>How can I make this work for mobiles too?</p>
  <p>If it helps, <a href="https://gist.github.com/thedivtagguy/f25bbd8e502df159c250f84b3ee91579" rel="nofollow noreferrer">this is the CSS for this component</a> and <a href="https://srishtiarchive.com" rel="nofollow noreferrer">here</a> is a live deploy (you'll have to switch to mobile view with Inspect Element, as it is hidden on big screens).</p>