jQuery focus unfocusable bug

by Jools Chadwick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <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>

JavaScript

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();
})