:focus not working on selecting my search field from button during animation

Update: The issue was that I was using an animation to show the input in a popup and the display: none to display: block was canceling the focus.

I can’t for the life of me understand why this button doesn’t trigger a focus for me. I’ve tried both jQuery and Javascript variations. I’ve attempted both class and id variations.

I’m unsure if the animation library is hijacking the focus state, perhaps from Webflow.

Here’s a quick demo and the code below:

The ID of the text field:

Selecting the button showing the ID:

Code I’ve tried (not to mention many other variations):

// Version 1 using jQuery
$(document).ready(function() {
  $('#searchFocusButton').click(function() {
      console.log('button clicked');
      const field = $('#searchField');
      console.log(field.length);
      field.focus() // focus the element
  });
});


// Version 2 using jQuery
$(function() {
  $("#searchFocusButton").click(function() {
    $("#searchField").focus();
  })
});


Hi!

It looks like my hunch was correct; I tried a version where I put the input on the page (instead of a popup), and it works.

Answer: An animation using the hide/show functionality creates a display: none to display: block that will cancel the focus on the input.

Workaround was to create a height of 0px (overflow hidden) to 100vh of the page over 0s in the animation to retain the focus on button click.

Elements that are not visible cannot receive focus, therefore the focus pseudo-class cannot apply.