Input Search Field Won't Focus After Click Magnifying Glass

[dandolino32Participant]

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 MarcinkoKeymaster]

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
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[dandolino32Participant]

Thank you Ernest. Appreciate this!!!!

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

THanks
Dan

[Ernest MarcinkoKeymaster]

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?

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[dandolino32Participant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[dandolino32Participant]

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 MarcinkoKeymaster]

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[dandolino32Participant]

Understood. Thank you so much for all your support

[Author]

Posts