0

Есть кастомный select, двух видов, с выбором одного значения и нескольких. Отслеживаю клик вне элемента с помощью @focusout. Проблема в том что, при попытке выбрать значение в элементе с одинарным выбором, она сразу закрывается, срабатывает @focusout и значение переопределяется через раз. При этом в элементе с мульти значением, все работает отлично.

Код на play.vuejs.org

Может есть какие-то другие альтернативы, как реализовать закрытие при клике вне элемента?

upd. Понял что баг происходит, если кликать на input, если вне инпута, а у самых границ элемента, то все окей

8
  • ru.stackoverflow.com/questions/1526359/… Commented 20 мая в 18:12
  • @Михаил а сможете помочь конкретно с моим кодом? Просто я не до конца понял, как работает ваш
    – Arteil
    Commented 21 мая в 10:43
  • Попробуйте для мультиселекта поставить <div class="custom-select-body" :class="active ? 'active' : ''" @mouseout="dropdownController()"> Просто я уже давно использую CompositionApi - по честному - нет времени все сначала разбирать. А мой Селект написан для случая Табов - много однотипных селектов. Commented 22 мая в 8:31
  • И кстати у вас когда в мультиселекте выбираются/убираются опции не последовательно расположению - то необходимо "приводить" выбранный массив к образцовому порядку, какой вы задаете в Options. Для этого просто после каждого "выбора"/изменения массива выбранных делайте: Выбранный = Опции.filter(e => выбранный.includes(e)) И порядок следования в выбранном массиве всегда будет как задаете в Options. Commented 22 мая в 8:47
  • Способ с @mouseout не подходит
    – Arteil
    Commented 22 мая в 8:49

1 ответ 1

0

Нашел решение данному вопросу.

В основной JS файл нужно добавить директиву

const clickOutside = {
beforeMount: (el, binding) => {
    el.clickOutsideEvent = event => {
        // here I check that click was outside the el and his children
        if (!(el == event.target || el.contains(event.target))) {
            // and if it did, call method provided in attribute value
            binding.value();
        }
    };
    document.addEventListener("click", el.clickOutsideEvent);
},
unmounted: el => {
    document.removeEventListener("click", el.clickOutsideEvent);
},};

createApp(App)
  .directive("click-outside", clickOutside)
  .mount("#app");

К компоненту (div)

<div class="custom-select" v-click-outside="someFunction()"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.