How to make an event on tab outside of the component?

Question

Vue.js

I have a question such that, let's say, when I passed from the input by pressing tab, then everything works fine, but if you press tab again, then you need the event to fire on the closing of the select. Approximately how to do this? https://codesandbox.io/s/3v1zp6x1w1
Here is the code but set in document tab event but it works

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

And in template

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

How to be here?
https://3v1zp6x1w1.codesandbox.io/

Answer 1

You're doing something wrong, I think. Try like this:

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

Remove the keyup and click handlers.