title: How to hide a dropdown when the user clicks outside of it
body: <p>Below is a simplified version of the input dropdown I am working with.</p>
  
  <p>A basic summary of what it does is: if you focus on the input, a dropdown appears. If you click one of the options in the dropdown, the option populates the input and the dropdown disappears. This is achieved using <code>onfocus</code> and a functions I called <code>dropdown();</code> and <code>undropdown();</code>. </p>
  
  <p>I'm in a dilemma, where I'm unable to make the dropdown disappear when someone clicks elsewhere. If I use <code>onblur</code>, it successfully hides the dropdown, but if you click on an option it doesn't populate the input, this is because, the <code>onblur</code> function runs first and, therefore, the <code>input();</code> function doesn't not run because the dropdown is already hidden.</p>
  
  <p>If you put an <code>onclick</code> on the body tag, or other parent, it considers the <code>onfocus</code> as a click, where it run's the <code>dropdown();</code> function then the <code>undropdown();</code> function immediately so the dropdown never appears since the functions overlap. </p>
  
  <p>I would appreciate help on figuring out how to order the functions so that they are executed in the right order without overlapping with each other.</p>
  
  <p>JSFiddle available <a href="https://jsfiddle.net/akq94885/" rel="noreferrer">here.</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function input(pos) {
    var dropdown = document.getElementsByClassName('drop');
    var li = dropdown[0].getElementsByTagName("li");
    document.getElementsByTagName('input')[0].value = li[pos].innerHTML;
    undropdown(0);
  }
  function dropdown(pos) {
    document.getElementsByClassName('content')[pos].style.display = "block"
  }
  function undropdown(pos) {
    document.getElementsByClassName('content')[pos].style.display = "none";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.drop {
    position: relative;
    display: inline-block;
    vertical-align: top;
    overflow: visible;
  }
  .content {
    display: none;
    list-style-type: none;
    border: 1px solid #000;
    padding: 0;
    margin: 0;
    position: absolute;
    z-index: 2;
    width: 100%;
    max-height: 190px;
    overflow-y: scroll;
  }
  .content li {
    padding: 12px 16px;
    display: block;
    margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="drop"&gt;
    &lt;input type="text" name="class" placeholder="Class" onfocus="dropdown(0)"/&gt;
    &lt;ul class="content"&gt;
      &lt;li onclick="input(0)"&gt;Option 1&lt;/li&gt;
      &lt;li onclick="input(1)"&gt;Option 2&lt;/li&gt;
      &lt;li onclick="input(2)"&gt;Option 3&lt;/li&gt;
      &lt;li onclick="input(3)"&gt;Option 4&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>PS: In addition to the above problem, I would appreciate suggestion for edits to get a better title for this question such that someone experiencing a similar problem could find it more easily.</p>