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?
