CSS: :focus-within 不适用于动态 JavaScript 生成的内容

Question

我在搜索栏的下拉菜单中将搜索建议显示为锚点。如果 focus-within .searchbar 元素，则下拉列表可见。这在我手动输入下拉建议时有效，但一旦我使用 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;
}

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

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