• Как подружить кастомный dropdown с нативным select?

    @goshaLoonny
    Для начала я эти два фрагмента кода:
    listItem.forEach(function (listItem) {
      listItem.addEventListener('click', function () {
        btnList.innerText = this.innerText;
        inputNone.value = this.dataset.value;
        dropdownList.classList.remove('_visible');
      });
    });

    listItem.forEach(function (listItem) {
      listItem.addEventListener('keyup', function (event) {
        if (event.key === 'Enter') {
          btnList.innerText = this.innerText;
          inputNone.value = this.dataset.value;
          dropdownList.classList.remove('_visible');
        }
      });
    });

    Советую изменить на эти:
    dropdownList.addEventListener('click', (e) => {
      if (!e.target.classList.contains('dropdown__list-item')) return;
    
      btnList.innerText = e.target.innerText;
      inputNone.value = e.target.dataset.value;
      dropdownList.classList.remove('_visible');
    })

    dropdownList.addEventListener('keyup', e => {
      if (!e.target.classList.contains('dropdown__list-item')) return;
      if (e.key !== 'Enter') return;
    
      btnList.innerText = e.target.innerText;
      inputNone.value = e.target.dataset.value;
      dropdownList.classList.remove('_visible');
    })

    Так как если вы захотите добавить новые элементы в список динамически, вам придется ручками добавлять обработчики им.

    То есть если я выберу какую-то опцию в десктопной версии, перейду на мобилку, то там эта опция не будет выбрана. Так как в форме я буду отправлять значение именно того селекта, который нативный, ему нужно значение, выбранное на кастомной десктопной версии - задавать.

    Если вы обрабатываете значение из <select>, то зачем вы присваиваете полученное после клика по пункту в кастомном dropdow значение другому элементу?
    <input type="text" name="select-category" value="" class="dropdown__input-hidden">

    const inputNone = document.querySelector('.dropdown__input-hidden');
    /* *** */
    inputNone.value = this.dataset.value;

    Очевидным решением будет присваивать значение именно <select> который с ваших слов вы обрабатываете в последующем.
    <select class="what_kind" name="boots"> *** </select>

    const whatKindSlct = document.querySelector('.what_kind');
    /* *** */
    whatKindSlct.value = this.dataset.value;
    // Или 
    // whatKindSlct.value = e.target.dataset.value;
    // Если решите использовать мой код

    P.S. Обратите внимание на повторяющийся код
    Ответ написан
    2 комментария