title: React Closing dropdown menu on selecting a list item or clicking outside the component
body: <p>I have a dropdown menu made in my react js , What i want is when i click on any list items i want it to get it closed or also even if i click anywhere outside it the dropdown menu should close by itself  (and then opens up again on click ofcoss)</p>
  <p>here is my code below for it</p>
  <pre><code>import React from &quot;react&quot;;
  import { useState, useEffect } from &quot;react&quot;;
  
  const TripTypeDropdown = (props) =&gt; {
    const [values, setValues] = useState([
      { tripType: &quot;One Way&quot;, value: 1 },
      { tripType: &quot;Return&quot;, value: 2 },
      { tripType: &quot;Multi- City&quot;, value: 3 },
    ]);
    const [selectedItem, setSelectedItem] = useState({
      tripType: &quot;One Way&quot;,
      value: 1,
    });
    const [isOpen, setIsOpen] = useState(false);
    const toggle = () =&gt; {
      console.log(&quot;toggle&quot;);
      setIsOpen(!isOpen);
    };
  
    const selectItemFromList = (index) =&gt; {
      console.log(&quot;select kiya&quot;);
      const itemSelected = values[index];
      console.log(itemSelected);
      setSelectedItem(itemSelected);
      setIsOpen(!isOpen)
    };
    const getActiveClassName = (item) =&gt; {
      if (selectedItem) {
        if (item.tripType == selectedItem.tripType) return &quot;active&quot;;
        else return &quot;&quot;;
      }
    };
    const toggleDropdown = () =&gt; {
      setIsOpen(!isOpen);
    };
    return (
      &lt;React.Fragment&gt;
        {console.log(selectedItem)}
        &lt;div
          onBlur={() =&gt; toggleDropdown()}
          onFocus={() =&gt; toggleDropdown()}
          tabIndex=&quot;0&quot;
        &gt;
          &lt;span className=&quot;custm-dropdown&quot; &gt;
            {selectedItem.tripType}
          &lt;/span&gt;
          {isOpen &amp;&amp; (
            &lt;div className={`dropdown-modal sm-modal ripple`}&gt;
              &lt;ul&gt;
                {values.map((item, index) =&gt; (
                  &lt;li
                    className={getActiveClassName(item)}
                    onClick={() =&gt; selectItemFromList(index)}
                    key={index}
                  &gt;
                    {item.tripType}
                  &lt;/li&gt;
                ))}
              &lt;/ul&gt;
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export default TripTypeDropdown;
  </code></pre>
  <p>The issue i am facing is when i am clicking the list items , my dropdown closes and then never opens up again. Hope someone helps me out.</p>
  <p>Thanks !</p>