¿Cómo hacer que un elemento espere a desplegar su contenido tras ser actualizado con una consulta?

Me encuentro con el siguiente problema:
Tengo un elemento <select> que debe de mostrar una lista de comentarios que contiene un item en la base de datos. Un evento click realiza una consulta en la base de datos y actualiza el contenido del elemento <select>, pero despliega la lista antes de que el contenido se actualice y debo de realizar un segundo click para que ya muestre el contenido actualizado.

Lo que quisiera es que la lista se desplegase actualizada desde el primer click.

Tengo lo siguiente…

El elemento <select> dentro de la vista.

    <select class="custom-select" name="read-selector-comment" id="read-selector-comment" data-userid="{{_id}}">       <option selected>Selecciona comentario del menú</option>     </select>  

Los siguientes listeners se activan tras cargar la página

  // Eventos que controlan la selección y visión de comentarios   const $  UserCommentsSelectorTab = document.getElementById(     'read-selector-comment',   );   if ($  UserCommentsSelectorTab) {     // Actualiza items de la lista a cada click     $  UserCommentsSelectorTab.addEventListener('click', refreshCommentsList);     // Mustra contenido selecionado     $  UserCommentsSelectorTab.addEventListener('change', viewComment);   }  

Un evento click sobre el elemento ejecuta la siguiente función que realiza una búsqueda en la base de datos y con el resultado introduce los elementos <option> en <select>

async function refreshCommentsList(event) {   const $  commentList = event.currentTarget;   // Solicitando actualizacion de datos al servidor.   const r = await fetch(`/user/comments/$  {$  commentList.dataset.userid}`, {     headers: new Headers(),     method: 'POST',   });    if (r.ok) {     const resp = await r.json();     let template = '<option selected>Selecciona comentario del menú</option>';      // Generando plantilla actualizada para el selector de comentarios     resp.forEach((element) => {       template += `<option name="comment-selected" value='{"text": "$  {element.text}",       "tags": "$  {element.tags}",       "user": "$  {element.user}",       "date": "$  {pretiffyDate(element.date)}"       }'"> $  {pretiffyDate(element.date)} - $  {element.user}}</option>`;     });      // Añade los elementos actualizados     $  commentList.innerHTML = template;   } else {     swal('Error', 'Error al actualizar comentarios', 'error');   } }  

El evento change sobre el elemento <select> actualiza otros elementos de la vista mostrando la información.

/** Muestra el comentario seleccionado */ function viewComment(event) {   const $  title_box = document.getElementById('comment-title');   const $  text_box = document.getElementById('text-comment-box');   const $  tags_box = document.getElementById('tags-comment-box');    const comment = JSON.parse(event.currentTarget.value);    // Título   $  title_box.innerText = `$  {comment.date} - $  {comment.user}`;    // Texto   $  text_box.innerText = comment.text;    // Tags   const tags = comment.tags.split(',');   let tagsTemplate = '';   tags.forEach((element) => {     tagsTemplate += `<span class="badge badge-success m-2">$  {element}</span>  `;   });   $  tags_box.innerHTML = tagsTemplate; }