Focus not returning to focusable parent

by David Iglesias

HTML

<input name="potato" value="some-value"/>

<div class="container" tabindex="1">
  <p>
  The parent DIV of this <tt>p</tt> is focusable.
  </p>
  <p id="victim" tabindex="1">
    This <tt>paragraph</tt> is also focusable, a child of the focusable DIV, will be deleted <span id="clk">5</span> seconds after focusing it!
  </p>
</div>

<button name="another">Clicky click</button>

<pre id="out"></pre>

CSS

*:focus {
  box-shadow: 0px 0px 2px 1px red;
}

pre {
  border: 1px solid gray;
  padding: 10px;
}

JavaScript

victim.addEventListener('focus', (e) => {
  deleteWithCountdown(victim, clk, 5);
});

window.addEventListener('focusin', (e) => {
  log('activeElement: ' + document.activeElement.tagName);
});

function log(what) {
  out.innerText += out.innerText.length ? `\n${what}`:what;
}

var interval;
function deleteWithCountdown(element, clock, seconds) {
	if (interval) return;
  var seconds = seconds;
  interval = window.setInterval(() => {
  	seconds--;
    clock.innerText = seconds;
    if (seconds <= 0) {
    	element.remove();
      window.clearInterval(interval);
      interval = null;
      log('activeElement: ' + document.activeElement.tagName);
    }
  }, 1000);
}