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

Design help Custom code
1

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:

image
image2534×1052 144 KB

Selecting the button showing the ID:

image
image904×570 32 KB

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!

2

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.