Input Search Field Won't Focus After Click Magnifying Glass

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Input Search Field Won't Focus After Click Magnifying Glass

This topic contains 8 replies, has 2 voices, and was last updated by dandolino32 dandolino32 3 weeks, 3 days ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #37572
    dandolino32
    dandolino32
    Participant

    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

    #37589
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #37609
    dandolino32
    dandolino32
    Participant

    Thank you Ernest. Appreciate this!!!!

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

    THanks
    Dan

    #37611
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #37660
    dandolino32
    dandolino32
    Participant
    You cannot access this content.
    #37670
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #37675
    dandolino32
    dandolino32
    Participant

    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

    #37676
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #37677
    dandolino32
    dandolino32
    Participant

    Understood. Thank you so much for all your support

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.