JSFiddle - React, Tailwind, and code Playground

by Weston Ruter

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p id="hidden">container
    <label>contained: 
        <input value="I can be focused" />
    </label>
</p>

<p><button type=button id="btnFocus"><code>input.focus()</code></button></p>

<p>But, jQuery UI 1.11.4 incorrectly reports <code>false</code> for whether this element is <code>:focusable</code>:</p>
    
<p><button type=button id="btnFocusable"><code>$(input).is(:focusable) === <span class="result">?</span></code></button></p>
    
<p>See <a href="https://github.com/jquery/jquery-ui/pull/1583">PR to fix</a>.</p>

CSS

p#hidden {
    visibility: hidden;
}
p#hidden label { 
    visibility: visible;
}

JavaScript

jQuery( function($) {
    $( '#btnFocus' ).click(function () {
        $( 'input:first' ).focus();
    });
    $( '#btnFocusable' ).click(function () {
        $( this ).find( '.result' ).text( $( 'input:first' ).is( ':focusable' ) ? 'true' : 'false' );
    });
} );