JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>popup test</title>
    </head>
    <body>
        Begin by hitting tab. Some browsers will already have set focus to the first input button, others not.<br/>
        Continue hitting tab until you reach #5. Note that 5 remains red and no blur event is fired for tabbing out of it.<br/>
        Use shift-tab to go in reverse and see that going in the opposite direction also is affected.<br/>
        <br/>The problems lie <a href="http://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L333">here</a> and <a href="http://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L336">here</a>. These should just return true.<br/>
        <br/>Mac users may want to change the input from button to text, since buttons can't have focus on mac? Very odd...
        <br/>Hit escape to make the dialog go away and make the links above clickable.
        <br/>Below is a textarea with debug output from each button's focus and blur handlers.
        <textarea id="ta" cols="60" rows="20"></textarea><br/>
    </body>
</html>

CSS

.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(http://daniel-dev.www.policymap.com/images/trans60.png); opacity: .40; filter:Alpha(Opacity=60); }
.ui-dialog-titlebar { display: none; }
.ui-dialog-content { border: 3px solid #000000; }

JavaScript

$(document).ready(function() {
    // Clean up the debug textarea when it fills.
    $('#ta').change(function() {
        var lines = $(this).val().split("\n");
        var rows = $(this).attr('rows');
        $(this).append("\n");
        if (lines.length > rows) {
            $(this).empty ();
            $(this).append (lines[lines.length - 1] + "\n");
        }
    });
    // Create the dialog
    dialog = $('<div/>');
    // Append some descriptive text to the dialog window
    $(dialog).html ('READ THE TEXT ABOVE FIRST!<br/>This is the modal dialog window. Hit escape to make it go away. Re-run the fiddle to bring it back.<br/><br/>Below are the buttons you can tab through.<br/><br/>');
    // Create 5 input buttons in a loop
    for (var i = 1; i <= 5; i++) {
        // Label each with the value of 1: 1 2 3 4 5
        var input = $('<input id="button' + i + '" type="button" value="' + i + '"/>');
        // Set the color of the text for the button. This is the unfocussed color
        $(input).css('color', 'blue');
        // This is so I can store data in the element itself to make it available in each blur and focus handler
        $(input).data('bla', i);
        // Set the blur handler
        $(input).focus(function() {
            // Make the button text red and bold on focus
            $(this).css({
                'color': 'red',
                'font-weight': 'bold'
            });
            // Log to the textarea, noting the index number and that it received focus
            $('#ta').append("Got focus: " + $(this).data('bla')).change();
        });
        $(input).blur(function() {
            // Restore the default blue and non-bold text on blur
            $(this).css({
                'color': 'blue',
                'font-weight': 'normal'
            });
            // Log to the textarea, noting the index number and that it was blurred
            $('#ta').append("Got blur: " + $(this).data('bla')).change();
        });
       ...