I have a vue 1 app. I needed a searchable picker and since I couldn't find a working one I made one myself.

This picker is composed of two parts:

• A text input field
• A multiple select

I wanted to achieve that when I focus the input, the select appears and allows me to choose some entries. When and only when I "blur" my custom component, meaning that I click outside both the input and the select, a method is fired that emits stuff and most importantly hides the select.

I first tried using @blur and @focus, on the input, but when I click on the select, the Input unfocuses and closes everything.

I then tried messing up the focused flag to not unfocus if the mouse button is pressed onto the select, but the picker won't close unless I refocus the Input.

I also tried to define a custom directive to catch when I click the body, but being my component part of the body it immediately closes when i click it.

I even tried to use @focus and @blur on the select too and show the picker when either one of them is focused, but apparently the select never focuses

So I finally tried to force the select to be focused as well when the Input is, but this can only be achieved with refs and every ref I use is undefined, doesn't matter when or where I log or use it, they are always undefined.

Any idea of how can I achieve something similar?