Клик вне элемента div

Question

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

Код на play.vuejs.org

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

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

Answer 1

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

В основной 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>

БЛОГ НА HUSL

Клик вне элемента div

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