Search input autofocus not working

Design help Custom code
1

I have a search bar on my nav, which shows after the search icon is clicked.

The issue is: I have set the autofocus on the search input, but it doesn’t seem to work somehow. Please see screenshots of the same.

PS: I tried adding this code and Div IDs are the same. Still doesn’t work. :frowning:

(refer to screenshots)

Custom code

search - no autofocus
search - no autofocus1920×291 31.4 KB

Search icon button
Search icon button1916×265 33.6 KB

2

Try making the class names all lowercase (Webflow converts to lowercase on publish)

3

Hi Vigy,

Make sure your input exists/ is loaded before the script is executed, this could be why it is not focusing.

4

I’ve just tried it but still doesn’t work :slightly_frowning_face:

5

OK so could you please add the custom code to make sure the input is loaded before the script? :pray:t3:

6

You’re using jQuery, so you can just use jQuery’s on document ready.

https://learn.jquery.com/using-jquery-core/document-ready/

I prefer the shorthand version, faster to type;

$(function() {
  $(".search-form-button-open").click(function() {
    $(".search-input-desktop.w-input").focus();
  })
});