This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Input Search Field Won’t Focus After Click Magnifying Glass – 2.0

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

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #54487
    dandolino32dandolino32
    Participant

    When you click on the search icon up top-right, It doesn’t focus in the search field popup. It used to. Thanks for your help in the past, you had sent me some code to add to our theme’s function.php file, but it doesn’t focus anymore. It focuses for less than a second and then stops.

    Here was the code that originally works:

    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 .asp_m input.orig').get(0);
    				input.focus(); 
    				input.setSelectionRange(0, 9999); 
    			}, 250);
    		});
    	});
    	</script>
    	<?php
    }

    This is a duplicate of our live website.
    https://speed1.beachboardwalk.com/
    Password Protected:
    User: scbb-staging
    Pass: classic

    #54488
    dandolino32dandolino32
    Participant

    Note that WP login url is: https://speed1.beachboardwalk.com/classic

    #54496
    Ernest MarcinkoErnest Marcinko
    Keymaster

    Hi,

    The script still works, the focus is removed by something else. I see a lot of minifed scripts and some errors in the console so it’s probably related to that. The proper solution would be to find out which one is triggered during the pop-up open and remove the incorrect handle that causes the issue.

    I can suggest a different method, but there is no guarantee it will work whatsoever:

    add_action('wp_footer', function () {
    	?>
    	<script>
    	jQuery(document).on('elementor/popup/show', ()=>{
    		setTimeout(()=>{
    			let input = jQuery('.dialog-widget .asp_m input.orig').get(0);
    			input.focus();
    			input.setSelectionRange(0, 9999);
    		}, 800);
    	});
    	</script>
    	<?php
    }, 999999);

    This should delay the focus by a bit, so could potentially override the incorrect blur.

    #54505
    dandolino32dandolino32
    Participant

    Hi Ernest.
    Thanks for that. It works to get it focused in the input field, but the focus removes every time the spinning animation occurs in the field, pretty much anytime you type any thing. Can you kindly find a way to prevent that or disable the spinner, if that fixes the issue?
    Thanks in advance,
    Dan

    #54506
    Ernest MarcinkoErnest Marcinko
    Keymaster

    That will not fix the issue, it is unrelated to the spinner. This is again caused by a 3rd party script, so I can’t guarantee anything. Normally the plugin does not blur the focus when displaying the results.

    Try this variation:

    add_action('wp_footer', function () {
    	?>
    	<script>
    		const f = ( select = false ) => {
    			let input = document.querySelector('.dialog-widget .asp_m input.orig');
    			if ( input === null ) {
    				return;
    			}
    			input.focus();
    			if ( select ) {
    				input.setSelectionRange(0, 9999);
    			}
    
    		}
    		jQuery(document).on('elementor/popup/show', ()=>{
    			setTimeout(()=>{f(true);}, 800);
    			document.querySelectorAll(".asp_main_container").forEach((el) => {
    				el.addEventListener("asp_search_end", () => {
    					setTimeout(()=>{f();}, 500);
    				});
    			});
    		});
    	</script>
    	<?php
    }, 999999);

    But again, this is just patching over and over something that may change and cause the conflict to appear again. It would be the best to find what the cause is.

    #54508
    dandolino32dandolino32
    Participant

    I really appreciate your willingness to help me with this. Thanks again, Ernest!

    #54861
    dandolino32dandolino32
    Participant

    Hi Ernest,
    The issue doesn’t get resolved on my iphone
    Would you be willing to inspect and let me know what script is conflicting with the plugin and forcing it to unfocus from the search input field?
    Thanks in advance,
    Dan

    #54862
    Ernest MarcinkoErnest Marcinko
    Keymaster

    Hi Dan,

    Sure, I can try. Can you please turn off asset minification, as right now every single script is delegated to some sort of a nitro CDN, so I can’t tell what the original source is.
    Without that I might be able to pinpoint by blocking scripts one by one and then check the script file source.

    #54869
    dandolino32dandolino32
    Participant

    Thanks Ernest. Appreciate it.

    I turned off nitropack caching on this duplicate staging site, and I removed the script that you made recently to workaround this issue.

    https://speed1.beachboardwalk.com/
    password protected
    username: scbbstaging
    pass: classic

    Thank you

    #54873
    Ernest MarcinkoErnest Marcinko
    Keymaster

    Thanks!

    Turns out that is not caused by anything, but it is a recent change in Apple IOS mobile devices. I have found this topic about it.

    Basically it is not possible to focus an input box programmatically after a timeout or asynchronous request on any iPhone within the latest IOS versions. I couldn’t find out why is that, but it is limited by the device and not by a script or the browser.

    #54880
    dandolino32dandolino32
    Participant

    Hi Ernest,
    The more jarring issue that we were chatting about in this thread is that… the input focus removes every time the spinning animation occurs in the field, pretty much anytime you type any thing. You indicated that some other script is causing that. Would you kindly be able to find out what script is causing that? I would be very appreciative
    https://speed1.beachboardwalk.com/
    Thanks
    Dan

    #54886
    Ernest MarcinkoErnest Marcinko
    Keymaster

    Yea, sure!

    It seems like it has something to do with the dialog, perhaps something with the settings, but I’m not sure. It’s part of Elementor, so you probably don’t want to disable that. I can’t tell if it’s the core script or something hooking into it though, most likely hook somewhere, but that’s impossible to find.

    What I found though is that this script should get around it, I just tested and it worked from the console:

    add_action('wp_footer', function () {
    	?>
    	<script>
    		const f = ( select = false ) => {
    			let input = document.querySelector('.dialog-widget .asp_m input.orig');
    			if ( input === null ) {
    				return;
    			}
    			input.focus();
    			if ( select ) {
    				input.setSelectionRange(0, 9999);
    			}
    
    		}
    		jQuery(document).on('elementor/popup/show', ()=>{
    			setTimeout(()=>{f(true);}, 800);
    			document.querySelectorAll(".asp_main_container").forEach((el) => {
    				el.addEventListener("asp_search_end", () => {
    					setTimeout(()=>{f();}, 500);
    				});
    			});
    		});
    	</script>
    	<?php
    }, 999999);
    #54896
    dandolino32dandolino32
    Participant

    Hi Ernest,
    Thank you. You already sent the same code above. But, this issue (after you start typing, it unfocses), this workaround doesn’t work on IOS, and mobile is the vast majority of our traffic. It used to work. If I were to take this issue to elementor, I feel they would likely say I need to go to Ajax Search Pro to fix this, and then I’m stuck. I have all your SFTP and WP Admin credentials, except WP login is /classic . Would you be willing to find the culprit, so this can get resolved? Maybe it’s my Ajax Search Pro configuration that’s not correct. Would be supper appreciative if you could help.
    Thanks in advance,
    Dan

    #54897
    Ernest MarcinkoErnest Marcinko
    Keymaster

    I understand, but the main issue is that it is not caused by Ajax Search Pro itself. There is no single piece of code that unfocuses the input field, it’s not possible to configure the plugin that way, it wouldn’t make sense at all.

    If it’s only IOS the issue, all we have is to keep trying to workaround. I’m willing to help with it, even though it is way out of scope of support.

    Can you please check if IOS phones is the only case where the code doesn’t work? I was working on a different feature where I found a yet uknown workaround for asynchronous IOS iPhone input focus which should work very well in this case too.
    If every other device works and only IOS is left, then there is hope.

    #54905
    dandolino32dandolino32
    Participant

    I appreciate it. I had my friend who has a samsung phone, and he said that as he types more and more, it doesn’t unfocus. He sent me a video to prove it. So, it sounds it maybe just IOS.

    But, I just noticed on another site we own and use search feature and ajax search pro, the unfocusing issue, as you’re typing, doesn’t happen on IOS. Same version of elementor and elementor pro.
    https://boardwalkbowl.com/

    Thanks in advance,
    Dan

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.