hi,
a bit late but who knows ??
i am no jquery master but this work for me, if it’s ok, it would be great to have it merged (hey devs), btw it’s working great on wp 4.7.4
// When the document is ready...
jQuery( document ).ready( function( $ ) {
// ... display the Full Screen search when:
// 1. The user focuses on a search field, or
// 2. The user clicks the Search button
$( 'form[role=search] input, form[role=search] button' ).on( 'focus, click', function( event ) {
// Prevent the default action
event.preventDefault();
// Display the Full Screen Search
$( '#full-screen-search' ).addClass( 'open' );
// Focus on the Full Screen Search Input Field
$( '#full-screen-search input' ).focus();
} );
// Hide the Full Screen search when the user clicks the close button
$( '#full-screen-search button.close' ).on( 'click', function( event ) {
// Prevent the default event
event.preventDefault();
// Hide the Full Screen Search
$( '#full-screen-search' ).removeClass( 'open' );
} );
//ADD THIS CODE FOR ESC KEY
$(document).keypress(function(e) {if (e.keyCode==27){ $( '#full-screen-search' ).removeClass( 'open' );}});
} );