JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>

<body>
<h1 id="qunit-header" tabindex="0">Lightbox Test Suite</h1>

<script type="text/javascript">
    var movable = $('#qunit-header');
    var count = 0;
    var focusListener = function () {
        ++count;
        console.debug('Focus called, count is :' + count);
    };
    var doNothing = function() {
        console.debug('Do nothing');
    }
    
    movable.bind('focus', focusListener);
    movable.bind('focusin', doNothing);
    
    /* trigger focus
     *
     * expected output: 
     * Focus called, count is :1
     * Do nothing
     *
     * actual output:
     * Focus called, count is :1
     * Do nothing
     * Focus called, count is :2
     */
    movable.trigger('focus');

</script>
</body>
</html>