Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Input Search Field Won’t Focus After Click Magnifying Glass – 2.0
- This topic has 18 replies, 2 voices, and was last updated 10 months, 2 weeks ago by
dandolino32.
-
AuthorPosts
-
June 23, 2025 at 10:17 pm #54487
dandolino32
ParticipantWhen 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: classicJune 23, 2025 at 11:09 pm #54488dandolino32
ParticipantNote that WP login url is: https://speed1.beachboardwalk.com/classic
June 24, 2025 at 9:30 am #54496Ernest Marcinko
KeymasterHi,
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.
June 25, 2025 at 12:11 am #54505dandolino32
ParticipantHi 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,
DanJune 25, 2025 at 10:51 am #54506Ernest Marcinko
KeymasterThat 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.
June 25, 2025 at 7:59 pm #54508dandolino32
ParticipantI really appreciate your willingness to help me with this. Thanks again, Ernest!
July 7, 2025 at 9:01 pm #54861dandolino32
ParticipantHi 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,
DanJuly 8, 2025 at 7:04 am #54862Ernest Marcinko
KeymasterHi 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.July 8, 2025 at 5:21 pm #54869dandolino32
ParticipantThanks 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: classicThank you
July 9, 2025 at 10:39 am #54873Ernest Marcinko
KeymasterThanks!
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.
July 9, 2025 at 5:37 pm #54880dandolino32
ParticipantHi 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
DanJuly 10, 2025 at 8:00 am #54886Ernest Marcinko
KeymasterYea, 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);July 10, 2025 at 5:44 pm #54896dandolino32
ParticipantHi 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,
DanJuly 10, 2025 at 7:39 pm #54897Ernest Marcinko
KeymasterI 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.July 11, 2025 at 7:20 pm #54905dandolino32
ParticipantI 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 -
AuthorPosts
- You must be logged in to reply to this topic.