title: Prevent dropdown from automatically reopening on mobile
body: <p>I have a drop down list as follows:</p>
  
  <pre><code>&lt;div className="dropdown"&gt;
      &lt;button className="nav-btn pick-a-sort"&gt;PICK A SORT:&lt;/button&gt;
      &lt;div className = "dropdown-content"&gt;
          &lt;button className="nav-btn" id = "bubble-sort" onClick = {()=&gt;{this.bubbleSort()}}&gt;BUBBLE SORT&lt;/button&gt;
          &lt;button className="nav-btn" id = "selection-sort" onClick = {()=&gt;{this.selectionSort()}}&gt;SELECTION SORT&lt;/button&gt;
          &lt;button className="nav-btn" id = "insertion-sort" onClick = {()=&gt;{this.insertionSort()}}&gt;INSERTION SORT&lt;/button&gt;
          &lt;button className="nav-btn" id = "quick-sort" onClick = {()=&gt;{this.quickSort()}}&gt;QUICK SORT&lt;/button&gt;
          &lt;button className="nav-btn" id = "merge-sort" onClick = {()=&gt;{this.mergeSort()}}&gt;MERGE SORT&lt;/button&gt;
          &lt;button className="nav-btn" id = "bead-sort" onClick = {()=&gt;{this.beadSort()}}&gt;BEAD SORT&lt;/button&gt;
          &lt;button className="nav-btn" id = "heap-sort" onClick = {()=&gt;{this.heapSort()}}&gt;HEAP SORT&lt;/button&gt;
          &lt;button className="nav-btn" id = "radix-sort" onClick = {()=&gt;{this.radixSort()}}&gt;RADIX SORT&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have set the CSS such that once any of the options is clicked, the dropdown automatically hides till the specific task is complete (sorting) by adding the class '.clicked' to the dropdown. Once the task is complete I remove the '.clicked' class. </p>
  
  <p>This is working great on desktop site but on the mobile site, once the task is complete, the dropdown reopens automatically, and I'm not exactly why.</p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>
  .dropdown {
      position: relative;
      display: inline-block;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }
  
  .dropdown-content .nav-btn{
      display: block;
      text-align: center;
      width: 100%;
      margin: 0 auto;
  }
  
  .dropdown:hover .dropdown-content {
      display: block;
  }
  
  .dropdown.clicked:hover .dropdown-content {
      display: none;
  }
  </code></pre>
  
  <p>Here is the live <a href="https://roy-05.github.io/sort-visualizer/" rel="nofollow noreferrer">website</a> where you can see the problem, by just switching the view to "mobile" and clicking on any algorithm under "PICK A SORT:"</p>
  
  <p>Any help will be greatly appreciated, thanks!</p>