0

The following JavaScript code to set focus on the text input works in Codpen, but not on my Client's website (in development). No errors are displayed and I can use classList to add or remove classes for the same text input.

Not sure where the issue is in my code...

var searchToggle = document.querySelectorAll( ".js--search-toggle" );
const searchForm = document.querySelector( ".header-search-form" );
const searchInput = document.querySelector( ".search-field" );

searchToggle.forEach(item => {
  item.addEventListener('click', e => {
    searchForm.classList.toggle( "open" );
    searchInput.style.backgroundColor = "red"; // This works
    searchInput.focus(); // This does not
  });
});
<form role="search" method="get" class="header-search-form" action="{{ site.url }}">
  <label for=""></label>
  <input type="search" class="search-field" autocomplete="off" placeholder="Search for a topic" value="" name="s" />
  <button type="button" class="btn js--search-toggle">
      Set Search Focus
 </button>
</form>

Update

Preview URL with issue

Mike Hermary
  • 346
  • 7
  • 22
  • 1
    `querySelectorAll` always return an array. Is never going to return `null` so your `typeof object` and `!== null` makes no sense actually. – Jorge Fuentes González Jan 08 '20 at 18:48
  • 1
    Right now you added a code that works. Please, add a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) where it fails. If it works, we cannot help you. Also, please, use snippet tool as is easier for us to check the code. – Jorge Fuentes González Jan 08 '20 at 18:50
  • @JorgeFuentesGonzález I have updated my question with the HTML and JavaScript snippets included. The code is working in the snippets, but not on my active WordPress site. – Mike Hermary Jan 08 '20 at 19:55
  • Then we cannot help you, obviously. We cannot magically know why your website is failing as you are sharing perfectly working code. The only thing I can think of is that you JavaScript is running before all the HTML has been created, which is a common newbie problem: https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Jorge Fuentes González Jan 10 '20 at 08:13
  • @JorgeFuentesGonzález The JavaScript is being loaded just before the closing `` tag, so this is not the problem. I have updated my question with a link to a preview URL and showing that I can set the style of the input background with the same code, just not the focus. – Mike Hermary Jan 10 '20 at 14:57
  • Try to add a `setTimeout` of 0 milliseconds to your focus. Doing it in the same tick as is being shown may create a problem. You need a workaround to actually make the browser render the element, like *reading* something from the element, but for this kind of things, is easier to just add a timeout. – Jorge Fuentes González Jan 10 '20 at 15:07
  • @JorgeFuentesGonzález I updated the production code with the following `setTimeout(function() { searchInput.focus(); }, 0);`. It did not work, but I am not sure if it is the right implementation. Learning as I go. – Mike Hermary Jan 10 '20 at 15:24
  • Yep, that's the correct implementation actually. – Jorge Fuentes González Jan 10 '20 at 17:16
  • @JorgeFuentesGonzález Thanks for confirming the code is correct. I setup a different, non WordPress form on the site and used a button to successfully set focus with JavaScript, so I am wondering if the JS is conflicting with WP/jQuery. No errors are reported in the console. – Mike Hermary Jan 10 '20 at 17:21

1 Answers1

-1

querySelectorAll return an array or NodeList

var searchToggle = document.querySelectorAll(".js--search-toggle");
const searchForm = document.querySelector(".header-search-form");
const searchInput = document.querySelector(".search-field");

[].slice.call(searchToggle).forEach(item => {
    item.addEventListener('click', e => {
        searchForm.classList.toggle("open");
        searchInput.focus();
    });
});
Julio Javier
  • 162
  • 4