Как правильно задать поведение label'a при клике на select?

Question

[Trying_new]

В select'e есть label (наглядно можно посмотреть в Codepen), через JS реализовал модель поведения label'a при клике на select повесив на документ слушатель события "mousedown" (код после комментария "// label animation"), но все равно повторить поведение как в примере не получилось. Поведение label'a при клике на select, при клике на другую область на странице и т.д., в примере вот такое:


Подскажите, пожалуйста, как правильно реализовать поведение labal'a как в примере выше? Как улучшить JS-код?

Answer 1

[Кирилл Петров]

Заменить весь JS на:

myOptions = [
    { label: 'SSS', value: 'SSS' },
    { label: 'SPC', value: 'SPC' },
    { label: 'SCR', value: 'SCR' },
    { label: 'ALASK', value: 'ALASK' },
    { label: 'ALBAN', value: 'ALBAN' },
    { label: 'MAYO1', value: 'MAYO1' },
    { label: 'GENZY', value: 'GENZY' }
]
let elQuery = '.criteria__activity'
 VirtualSelect.init({
    ele: elQuery,
    options: myOptions,
    hideClearButton: true,
    multiple: true,
    placeholder: '',
    searchPlaceholderText: 'Search here..'
});

let vs = document.querySelector(elQuery)

vs.addEventListener('beforeClose', () => {
  if (vs.value.length == 0) {
    document.querySelector('.criteria-block .criteria__activity-label').classList.remove('anim')
  }
});

vs.addEventListener('beforeOpen', () => {
  document.querySelector('.criteria-block .criteria__activity-label').classList.add('anim')
});

Comments

[Trying_new]

Спасибо большое! Всего Вам доброго! :)