title: Select current item when tabbing off Select2 input
body: <p>This has been the subject of the following <em>similar</em> SO Question and several github issues including:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/13820718/jquery-select2-tag-on-blur"><strong>Stack Overflow</strong> - jQuery Select2 Tag on Blur</a></li>
  <li><a href="https://github.com/select2/select2/issues/4578" rel="nofollow noreferrer"><strong>#4578</strong> - Tab and Esc should select the option</a></li>
  <li><a href="https://github.com/select2/select2/issues/4820" rel="nofollow noreferrer"><strong>#4820</strong> - TAB should select a result #4820</a></li>
  <li><a href="https://github.com/select2/select2/issues/3472" rel="nofollow noreferrer"><strong>#3472</strong> - Arrow keys do not change value of select </a></li>
  </ul>
  
  <p><em>But</em> the suggested solutions or questions have <em>treated all blur events equally</em>, regardless of how they were invoked.  With most answers leveraging <a href="https://select2.org/dropdown#automatic-selection" rel="nofollow noreferrer"><strong>Automatic selection</strong></a> by setting <a href="https://select2.org/configuration/options-api" rel="nofollow noreferrer"><code>selectOnClose</code></a>.</p>
  
  <p>Ideally, clicking off the dropdown (escaping) after merely hovering over options should not change the value:</p>
  
  <p><a href="https://i.stack.imgur.com/e5LlU.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e5LlU.gif" alt="SelectOnClose violation of principle of least surprise"></a></p>
  
  <p>How can you update the selection on tabout, but not other close events?</p>
  
  <h3>Here's an MCVE in <a href="https://jsfiddle.net/KyleMit/zo751wv3/" rel="nofollow noreferrer">jsFiddle</a> and StackSnippets:</h3>
  
  <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>$('.select2').select2({});</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"&gt;&lt;/script&gt;
  
  &lt;div class="form-control"&gt;
    &lt;label for="foods2"&gt;Select2&lt;/label&gt;
    &lt;select id="foods2" class="select2" &gt;
      &lt;option value="1"&gt;Apple&lt;/option&gt;
      &lt;option value="2"&gt;Banana&lt;/option&gt;
      &lt;option value="3"&gt;Carrot&lt;/option&gt;
      &lt;option value="4"&gt;Donut&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>