JS scrollIntoView not working with focus()

Question

In a single function, I'm trying to achieve 2 things :

1. Scroll to a section
2. Focus on an input

This is my code :

function search() {
  document.getElementById("searchbar").style.display = "block";
  document.getElementById("flex").style.display = "none";
  document.getElementById("books").scrollIntoView({behavior: 'smooth'});
  key();
};
function key(){
  document.getElementById("searchbox").focus();
};

The scrolling is not working here. If i remove the 'key' function, it works.

There's no need for separate 'key' function, but i tried.

The input with id "searchbox" is placed inside a "position:fixed" division. Its outside the "books" section.

Answer 1

You can simply invert the order in which you call these methods.

function search() {
  document.getElementById("searchbox").focus(); 
  document.getElementById("books").scrollIntoView({behavior: 'smooth'});
};
document.getElementById("btn").onclick = search;

#books {
  margin-top: 300vh;
}

<button id="btn">search</button>
<input id="searchbox" value="#searchbox">
<div id="books">Some books</div>

What happens is that calling Element.focus() will automatically make your browser scroll to that element. Doing so, it will cancel the previous call to scrollIntoView. By inversing the calls order, scrollIntoView will cancel the focus' scroll, which is what you want.