CSS: :focus-within not working on dynamic JavaScript-generated content

I’m displaying search suggestions as anchors inside the dropdown of a searchbar. If there’s focus-within the .searchbar element, the dropdown is visible. This works when I type the dropdown suggestions by hand but as soon as I use Javascript to generate them, the focus-within stops working.

HTML:

<div class="searchbar float float-up delay05">
    <input type="text">
    <div class="dropdown suggestions"></div>
</div>

CSS:

.searchbar:focus-within .suggestions{
    opacity: 1;
    visibility: visible;
    top: 43px;
}

JavaScript:

searchinput.oninput = generateSuggestions;

function generateSuggestions(){
    searchbar_dropdown.innerHTML = '';
    for(suggestion of show_suggestions){
        const a = document.createElement('a');
        a.src = 'explore.php?search='+suggestion['suggestion'];
        a.innerText = suggestion['suggestion'];
        searchbar_dropdown.appendChild(a);
    }

// I tried these two but it isn't working
    window.requestAnimationFrame();
    searchbar_dropdown.offsetHeight;
}