Элементы select не открываются с библиотекой choises, помогите найти где конфликтует

Задача: В блоке контактов нужно предусмотреть возможность добавления до 10 контактов включительно. Для этого под добавленными контактами должна быть кнопка "Добавить контакт". Если у клиента уже добавлено 10 контактов, кнопка не должна отображаться. Подключены библиотеки bootstrap5 и coises. Проблема в том что select не активный использую метод клонирования.

  <div class="modal__contact">
        <div id="contactFormsContainer"></div>

        <div id="contactFormTemplate" style="display: none">
          <select class="modal__contact-type js-choice">
            <option
              class="choice"
              value="email"
              aria-label="'электронная почта"
            >
              Email
            </option>
            <option class="choice" value="phone" aria-label="телефон">
              Телефон
            </option>
            <option
              class="choice"
              value="extraPhone"
              aria-label="дополнительный телефон"
            >
              Дополнительный телефон
            </option>
          </select>
          <input
            type="text"
            class="modal__contact-value"
            placeholder="Введите данные контакта"
          />
          <button class="modal__btn-close">Закрыть</button>
        </div>

        <button
          class="modal__btn-add"
          type="button"
          id="openContactFormBtn"
          aria-label="добавить контакт"
        >
        
          Добавить контакт
        </button>
      </div>

JS:

document.addEventListener("DOMContentLoaded", function () {
  // Получаем все элементы с классом .js-choice
  const choiceElements = document.querySelectorAll(".js-choice");

  // Проходим по каждому элементу и инициализируем Choices
  choiceElements.forEach(function (element) {
    new Choices(element, {
      allowHTML: true, // Устанавливаем allowHTML в true
    });
  });
});

let maxContacts = 10;
let openContactFormBtn = document.getElementById("openContactFormBtn"); //кнопка добавить
let contactFormsContainer = document.getElementById("contactFormsContainer"); //
let contactFormTemplate = document.getElementById("contactFormTemplate");

function updateAddContactButtonVisibility() {
  if (contactFormsContainer.childElementCount >= maxContacts) {
    openContactFormBtn.style.display = "none";
  } else {
    openContactFormBtn.style.display = "block";
  }
}

function addContactForm() {
  if (contactFormsContainer.childElementCount < maxContacts) {
    let clonedForm = contactFormTemplate.cloneNode(true);
    clonedForm.removeAttribute("id");
    clonedForm.style.display = "block";
    contactFormsContainer.appendChild(clonedForm);
    updateAddContactButtonVisibility();
  }
}

openContactFormBtn.addEventListener("click", function (event) {
  addContactForm();
});

contactFormsContainer.addEventListener("click", function (event) {
  if (event.target && event.target.classList.contains("modal__btn-close")) {
    event.target.parentNode.remove();
    updateAddContactButtonVisibility();
  }
});

Ответы (1 шт):

Автор решения: Дмитрий

Решение: заменил DOMContentLoaded на функцию инициализации для клонированных элементов. Спасибо @Simon.

function initializeChoicesInClonedForm(clonedForm) {
  const choiceElements = clonedForm.querySelectorAll(".js-choice");
  choiceElements.forEach(function (element) {
    new Choices(element, {
      allowHTML: true,
    });
  });
}

function addContactForm() {
  if (contactFormsContainer.childElementCount < maxContacts) {
    let clonedForm = contactFormTemplate.cloneNode(true);
    clonedForm.removeAttribute("id");
    clonedForm.style.display = "block";
    contactFormsContainer.appendChild(clonedForm);

    // Инициализируем Choices только внутри новой формы
    initializeChoicesInClonedForm(clonedForm);

    updateAddContactButtonVisibility();
  }
}

→ Ссылка