Как сделать событие на tab за рамки компонента?

Question

[Руслан Абсалямов]

У меня вопрос такой, что допустим когда с инпута перешел через нажатием tab, то все нормально срабатывает, но если повторно нажать на tab то нужно чтобы событие срабатывала на закрытие select. Как примерно это сделать?https://codesandbox.io/s/3v1zp6x1w1
Вот код, но установить в document событие tab но это срабатывает

methods: {
            closeOptionTab(e) {
                if (this.$refs['selected'].contains(e.target)) {
                    return;
                }
                if (this.disabled) {
                    this.disabled = false;
                }
            }
        },
created() {
            document.addEventListener("tab", this.closeOptionTab)
        }

А в template

<input
                    @keyup.tab="disabled = true"
                    type="text"
                    class="field-form"
                    :value="name"
                    @click="onClick"
                    :placeholder="inputPlaceholder"
            />

Как тут быть?
https://3v1zp6x1w1.codesandbox.io/

Answer 1

[0xD34F]

Чё-то вы не то делаете, как мне кажется. Попробуйте так:

@focus="disabled = true"
@blur="disabled = false"
@mousedown="disabled = !disabled"

А обработчики keyup и click уберите.

Comments

[Руслан Абсалямов]

Но mousedown ничем же вроде бы не отличается нежели от click в данном случае или я ошибаюсь?

[0xD34F]

Руслан Абсалямов, ошибаетесь. Поставьте mousedown и кликните на поле ввода, где есть выпадающий список. Потом поставьте click и тоже кликните. Сравните увиденный результат.