.focus() not working on input

[Nic727]

Hi,

I'm creating a search form that is appearing full screen when clicking on a "search" icon.

The code I have for the HTML is :

<!--SEARCH OVERLAY-->
    <div class="search-overlay">
        <i class="close-search fas fa-times"></i>
        <form>
        <input type="search" id="search" name="search" class="searchbox" placeholder="Rechercher sur le site...">
        </form>
    </div>

and the JQuery

// Search bar
    if($(".search-icon").click(function(){
        $(".search-overlay").addClass("open-search");
        $(".searchbox").focus();
    }));
    if($(".close-search").click(function(){
        $(".search-overlay").removeClass("open-search");
    }));

What I don't understand is that the .focus() is not working at all, but the rest of the code is correct. I tried with a console.log and it just seems to pass through this line like if it doesn't exist.

I tried everything like setTimeOut, placing the focus in another function, etc.

Thank you for your help

[dsonesuk]

Jquery click event to add class and focus, all within a IF condition? Thats a new one! So basically it will return false or true then ...........................................................................................what! Do i do now??? ......................................still waiting.........................................oh i give up!

Someone needs coffee.

[Nic727]

Hi,

I removed the if condition, because like you mention, I don't think it was useful for this action. However, I don't understand what you mean by true or false... Well, I understand what it means, but I don't understand why my focus() is returning false (I guess since it's not focusing). From every websites I visited, they are always using .focus() the exact same way I do... It even worked two days ago when I was testing another kind of search bar...

----
Edit

It works now when I add this 

setTimeout(function(){ $('.searchbox'). focus (); }, 500);

I don't know the reason it need a timeout, but now it works.

Edited February 3, 2021 by Nic727

[dsonesuk]

All if condition, either give a true or false

a=1;

if(a > 0) true

if(a ==0) false.

it determines if the code following it in curly braces is run or filtered more with elseif or else, which usually capture the alternate result, true against if condition false, false against if condition true.

The click event on its own determines what should happen to other elements manipulation on being clicked. A if condition would only be used within the click events own anonymous function.

Like

function(){

if($(".search-overlay").hasClass("open-search")){

$(".search-overlay").removeClass("open-search");

}

}

The only problem i see is if there is multiple search box classes existing, so it would be better to use id reference instead.

[Nic727]

Ok thank you.

 

I only have one search box on my website. That's why I don't really use else if in my code. The focus should only be activated automatically when clicking the button/icon.