Can initial focus be set to search field in WordPress Media Library?

I was just wondering if it’s possible somehow (via an addon maybe?) to set the initial focus when the WordPress media library pops up to be the search field?

I have a lot of posts where I need to select images very fast and need to type in the names of the images to find them and this would be exceptionally handy except I’ve looked on WordPress.org and a few other places that I know of and can’t find a plugin that can do this although someone here might know of one or perhaps a way of doing this?

Many thanks in advance,

Best wishes,

Mark

Here’s some code that will set the focus to the search field when clicking on the Add Media button or when opening the media modal when setting a featured image. Add this code to your theme’s functions.php or to a plugin to use it.

Note: This is an updated version of my original solution. I think this one is a little more flexible and reliable because it leverages the WP Media API.

/**
 * When a wp.media Modal is opened, set the focus to the media toolbar's search field.
 */
add_action( 'admin_footer-post-new.php', 'wpse_media_library_search_focus' );
add_action( 'admin_footer-post.php', 'wpse_media_library_search_focus' );
function wpse_media_library_search_focus() { ?>
<script type="text/javascript">
    ( function( $ ) {
        $( document ).ready( function() {

            // Ensure the wp.media object is set, otherwise we can't do anything.
            if ( wp.media ) {

                // Ensure that the Modal is ready. This approach resolves the 
                // need for timers which were used in a previous version of my answer
                // due to the modal not being ready yet.
                wp.media.view.Modal.prototype.on( "ready", function() {
                    // console.log( "media modal ready" );

                    // Execute this code when a Modal is opened.
                    // via https://gist.github.com/soderlind/370720db977f27c20360
                    wp.media.view.Modal.prototype.on( "open", function() {
                        // console.log( "media modal open" );

                        // Select the the .media-modal within the current backbone view,
                        // find the search input, and set the focus.
                        // http://stackoverflow.com/a/8934067/3059883
                        $( ".media-modal", this.el ).find( "#media-search-input" ).focus();
                    });

                    // Execute this code when a Modal is closed.
                    wp.media.view.Modal.prototype.on( "close", function() {
                         // console.log( "media modal close" );
                    });
                });
            }

        });
    })( jQuery );
</script><?php
}

For posterity’s sake, here is the original version that I posted. I think the version above is much better.

add_action( 'admin_footer-post-new.php', 'wpse_media_library_search_focus_old' );
add_action( 'admin_footer-post.php', 'wpse_media_library_search_focus_old' );
function wpse_media_library_search_focus_old() {
?>
<script type="text/javascript">
(function($) {
    $(document).ready( function() {

        // Focus the search field for Posts
        // http://wordpress-hackers.1065353.n5.nabble.com/JavaScript-events-on-media-popup-td42941.html
        $(document.body).on( 'click', '.insert-media', function( event ) {
            wp.media.controller.Library.prototype.defaults.contentUserSetting = false;

            setTimeout(function(){
                $("[id^=__wp-uploader-id]").each( function( index ) {
                    if ( $(this).css('display') != 'none' ) {
                        $(this).find("#media-search-input").focus();
                    }
                }); 
            }, 20);

        }); 

        // Focus the search field for Post Thumbnails
        $( '#set-post-thumbnail').on( 'click', function( event ) {
            wp.media.controller.FeaturedImage.prototype.defaults.contentUserSetting = true;
            setTimeout(function(){
                $("[id^=__wp-uploader-id]").each( function( index ) {
                    //alert( index + ": " + value );
                    if ( $(this).css('display') != 'none' ) {
                        $(this).find("#media-search-input").focus();
                    }
                }); 
            }, 20);

        }); 
    });
})(jQuery);
</script><?php
}