Search in menu is disabled

[Chas9000c25Participant]

I placed an Ajax Search Pro search form in the menu using the method described in your documentation (using a custom link with the search form short code).

However, the search form is clearly malfunctioning. If I click it with a mouse, it does not receive focus, so no input can be typed into it. And the form submission icon (the magnifying glass icon) is not flush right with the form, but is left of where it should be.

Interestingly, the exact same search form is also placed in the content itself (not in the menu) and functions perfectly.

So this seems to indicate that the problem only occurs when the search form is in the menu, not when it is in the body content.

Could you please take a look at my site (https://wheresthejump.com) to see what I’m referring to and let me know what I can do to get the search form in the menu working as perfectly as it does when it’s in the body content?

Thanks.

[Chas9000c25Participant]

Sorry, I should have pointed you to a development environment for my site, not the production version. Please see https://wtjdev.wpengine.com/ instead of https://wheresthejump.com. The dev version (wtjdev.wpengine.com) is running the Ajax Search Pro search form and has the issue. Sorry for the confusion, and thanks.

[Ernest MarcinkoKeymaster]

Hi,

Thank you for the details. It seems like there is a 3rd party script that simply negates the focus of the menu elements upon clicking them, this includes the search bar as well, since it is part of the menu in that case. I am not sure which one is it exactly, but it might be possible to somehow correct that via a custom script.

Try adding this custom code to the functions.php in your theme/child theme directory. Before editing, please make sure to have a full site back-up just in case!

add_filter( 'wp_footer', 'asp_try_fixing_focus' );
function asp_try_fixing_focus() {
	?>
	<script>
	jQuery('input.orig').on('mouseup', function(){
		var $n = jQuery(this); 
		setTimeout(function(){
			$n.focus();
		}, 40);
	});
	</script>
	<?php
}

I am not sure if this will work correctly in all cases, but should do something for sure. The optimal solution would be to turn off or modify that other script so that the input does not immediately loose focus once clicked.

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

[Chas9000c25Participant]

Ernest, thanks, that helps. What is the specific script that’s conflicting with the search form? If you could let me know the exact name of the function call or the code snippet that’s the problem, that may help me identify where it’s coming from so I can eliminate the problem that way, rather than modifying functions.php. Thanks again.

[Ernest MarcinkoKeymaster]

Unfortunately I cannot tell. I tried to get the event listeners via the chrome debugger but there is too many of them and most of it is minified. Reverse engineering this can be very difficult. I suggest asking the theme/menu developer, I am sure they will point right to in in a minute.

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

[Chas9000c25Participant]

I spoke with the theme developer and he said he wasn’t seeing anything obvious. But he suggested we hook the search into the navigation (outside the menu itself) to get it to work. Is there a function we can reference to output the search form, so we can try this?

[Ernest MarcinkoKeymaster]

Hi,

Sure, you can use the PHP version of the shortcode for that: https://documentation.ajaxsearchpro.com/getting-started/placing-the-search-shortcode-in-theme-files

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

[Author]

Posts