<div id="hideable">
    <div id="focusable" tabindex="1">
      I am focusable
    </div>
  </div>
  <button id="button">
    Toggle visibility
  </button>
  <div id="output">
    Click "I am focusable" to focus. Click "Toggle visibility" to hide/show the focusable element
  </div>

const $button = $('#button');
const $focusable = $('#focusable');
const $hideable = $('#hideable');
const $output = $('#output');
let focusinCount = 0;
$hideable.on('focusin', function() {
  focusinCount++;
  $output.text('I felt that ' + focusinCount);
});
let visible = true;
$button.click(function() {
  if (visible) {
    $hideable.hide();
  } else {
    $focusable.focus(); // Comment out this to fix
    $hideable.show();
  }
  visible = !visible;
});
$focusable.on('mousedown', function(event) {
  event.preventDefault();
  $focusable.focus();
})