Search dropdown element, focus on click

[buckwebdev]

Trying to figure out how I can make my search dropdown box be on focus, ready for a user to type their search once the magnifying glass is clicked. I see a lot of ways to do it in regular html and javascript but is there a way that you can do it just by editing the css within the element itself?

[ruenel]

Hello Buck,

Thanks for writing in!

The css can only be use to style an element. You can use this css code:

.x-dropdown .x-search .x-search-input:focus{
    box-shadow: 0 0 4px rgba(0,0,0,0.15) !important
}

The click events and trigger the focus of the search input field should be done with JS script.

(function($){
	$(".x-anchor-toggle").click(function () {
    	$('.x-search .x-search-input').focus();
    	console.log('focused!!');
	});
})(jQuery);

Hope this helps.

[buckwebdev]

We are using the pro headers and it does not appear to be working with it. You can view the page here

[ruenel]

Hello Buck,

We have tried everything including this code:

(function($){
	$(".x-anchor-toggle").on('click touchstart',function () {
		$('.x-search').addClass('x-search-focused');
    	$('.x-search').find('.x-search-input').css('outline', 'none').focus();
    	console.log('focused!!!');
	});
})(jQuery);

Since the search is located in a modal, you will need to click the input to focus it.