Input Search Field Won't Focus After Click Magnifying Glass

[dandolino32]

Hi,
This is the staging website that shows the issue. We are using the search funtionality from the top right header of the site. We would like the cursor to focus on the search input field when you click the magnifying glass.
I activated the “Focus the search input when the page is loaded? ” option under Search box layout. And I found a ticket where you or one of your reps recommend adding jQuery code:
$(".proinput input.orig").focus();
I’ve tried both of those fixes and still can’t get it to work.
Can you please help?
https://scbbstaging.wpengine.com/
Thanks in advance,
Dan

[Ernest Marcinko]

Hi,

Some custom code will be needed for this, as the input focus has to be triggered on that 3rd party magnifier click event. Luckily it should not be too difficult.

Try adding this code to the functions.php file in your theme/child theme directory – make sure to have a full server back-up first for safety. For more details you can check the safe coding guidelines.

add_action('wp_footer', 'asp_footer_custom_script', 999999);
function asp_footer_custom_script() {
	?>
	<script>
	(function($){
		$('header .fa-search').on('click', function(){
			setTimeout(function(){
				$('.dialog-widget-content .asp_m input.orig').get(0).focus(); 
			}, 250);
		});
	})(WPD.dom);
	</script>
	<?php
}

[dandolino32]

Thank you Ernest. Appreciate this!!!!

It works on desktop, but not on mobile.
Is there a fix to that?

THanks
Dan

[Ernest Marcinko]

Are you sure? It does seem to work on our ends. Can you try clearing the mobile browser cache to make sure it is updated?

[dandolino32]

You cannot access this content.

[Ernest Marcinko]

Thank you Dan! I have actually tested on a mobile device, and it worked just fine for some reason. Right now I don’t have an iPhone at hand, maybe that has something to do with the issue. Samsung and Huawei Chrome browsers seem to work just fine. IOS Safari is notoriously problematic with user generated events, such as input focus.

Maybe try this variation instead:

add_action('wp_footer', 'asp_footer_custom_script', 999999);
function asp_footer_custom_script() {
	?>
	<script>
	(function($){
		$('header .fa-search').on('click touchstart', function(){
			setTimeout(function(){
				let input = $('.dialog-widget-content .asp_m input.orig').get(0);
				input.focus(); 
				input.setSelectionRange(0, 9999); 
			}, 250);
		});
	})(WPD.dom);
	</script>
	<?php
}

This should explicitly capture the input.

[dandolino32]

Hi Ernest,
I really appreciate your effort. I updated it, cleared all caches, opened private/incognito windows, and still doesn’t work on iphone. So strange. Would you be willing to try something else or use the credentials to troubleshoot?
Thanks
Dan

[Ernest Marcinko]

Hi Dan,

I highly doubt that I can do anything more, that is the only way to do this. I did a bit of research just to be sure, and this is a known thing for IOS Safari, and there is no way around it apparently. It even varies from device to device, page to page, it is a real pain in the ass for developers – but nothing new, Safari always has been a problem to deal with from developers perspective.

[dandolino32]

Understood. Thank you so much for all your support

[dandolino32]

Hi Ernest,
Hope you are doing well.
The issue that you fixed in this post in reply #37670 has recently stopped working. I tried in Chrome and Safari desktop computer.
Could you please update the code to work?
Let me know if you want WP Admin or FTP access.
https://beachboardwalk.com/
Thank you
Dan

[Ernest Marcinko]

Hi Dan,

I see an error in the console, maybe it is related, but instead of the current code, try this:

add_action('wp_footer', 'asp_footer_custom_script', 999999);
function asp_footer_custom_script() {
	?>
	<script>
	jQuery(function($){
		$('header .fa-search').on('click touchstart', function(){
			setTimeout(function(){
				let input = $('.dialog-widget-content .asp_m input.orig').get(0);
				input.focus(); 
				input.setSelectionRange(0, 9999); 
			}, 250);
		});
	});
	</script>
	<?php
}

[Author]

Posts