title: Chrome: Blur - Alert - Focus sequence causes infinite alert loop
body: <p>Consider this code: </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>var input = document.getElementById("hello");
  input.addEventListener('blur', function() {
    alert('hello');
    input.select();
    input.focus();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" value="hello" id="hello" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The idea around it is to keep the user focused in the input until he/she enters a valid text in it. This is a simplified version of the code.</p>
  
  <p>Js fiddle here: <a href="https://jsfiddle.net/wzwft49w/9/" rel="nofollow noreferrer">https://jsfiddle.net/wzwft49w/9/</a></p>
  
  <p><strong>Problem:</strong> If you focus on the input and then blur it, you will get an infinite alert popup in Chrome but not in IE.</p>
  
  <p><em>1. How would you solve this problem?</em></p>
  
  <p><em>2. Any ideas on why does this happen?</em></p>
  
  <p>Notes: </p>
  
  <ul>
  <li>I already checked this question but that fix doesn't work in this case: <a href="https://stackoverflow.com/questions/6151027/can-one-prevent-chrome-causing-an-infinite-loop-when-displaying-alerts-on-the-fo">Other question</a></li>
  <li>Here's an old Chrome bug related to blur and focus (not sure if it could have anything to do with this, although it is marked as solved): <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=117307" rel="nofollow noreferrer">Chrome bug</a></li>
  </ul>