scrollIntoView seems to be firing too early after forEach loop

Question

I have the following two functions...

function sizeSearch(size) {
    const container = document.querySelector('ul.size-ranks');
    const rankElems = container.querySelectorAll('li');
    rankElems.forEach(e => {
        e.style.display = 'none';
        e.classList.remove('active');
    });

    const sizeID = size.replace(/\D/g,'') + '-rank';
    const sizeElem = document.getElementById(sizeID);
    if (sizeElem) {
        sizeElem.classList.add('active');
        sizeElem.style.display = '';
    } else {
        container.insertAdjacentHTML('beforeend', '<li class="empty-search">Size not found</li>');
    }
}

function clearSizeSearch() {
    document.querySelectorAll('li.empty-search').forEach(e => e.remove());
    document.querySelectorAll('ul.size-ranks li').forEach(e => e.style.display = '');
    document.querySelector('ul.size-ranks li.active').scrollIntoView();
}

The sizeSearch() function works fine. When the clearSizeSearch() function is called, all of the <li> elements reappear as expected, and you can very briefly see the desired .active element scroll into view as expected, but then it immediately scrolls back to the top of the container element (or maybe it re-renders that way after the DOM is finished settling?).

If I manually run document.querySelector('ul.size-ranks li.active').scrollIntoView(); in the console after running clearSizeSearch(), then it works fine. That, along with the fact that I can briefly see it scroll into view when running clearSizeSearch(), makes it seem like maybe it's running before the prior commands have finished executing, but as far as I've been able to gather, forEach() is not async by default, and any commands that come after should not get run until it's done.

Answer 1

Here's my solution.

function clearSizeSearch() {
    document.querySelectorAll('li.empty-search').forEach(e => e.remove());
    document.querySelectorAll('ul.size-ranks li').forEach(e => e.style.display = '');
    setTimeout(() => {
        document.querySelector('ul.size-ranks li.active').scrollIntoView();
    }, 0);
}