Vue / JavaScript in general: prevent blur / focusout if you clicked something special
So I'm doing an autocomplete search.
Which goes by a input type=text
and an absolute positioned div which shows the suggestions below it. The search string there is highlighted and looks for several parts (name of a person you search for or his company).
The suggestions are parted: They highlight the name and the company. And if you click on either the name or the company the search string will be filled up with it. Or on pressing "enter"
the search submits your current term.
And I'm not having fun on "@blur / @focusout" with this. I want to hide the "suggestions div" if you click outside of the input text (basically cancel it) but NOT if you click on a suggestion.
And the suggestions themself are layered - like : <div class="name" ... <div class="company" ... so checking the blur event's target- if it is something you can actually click is kinda exhausting.
Unfortunately the blur event hits before the click event on a name / company. So you can't say "@click="getThatClick" - but the click-event isn't triggered as blur came first.
Adding @click.stop or so didn't help.
Any thoughts on this?
Which goes by a input type=text
and an absolute positioned div which shows the suggestions below it. The search string there is highlighted and looks for several parts (name of a person you search for or his company).
The suggestions are parted: They highlight the name and the company. And if you click on either the name or the company the search string will be filled up with it. Or on pressing "enter"
the search submits your current term.
And I'm not having fun on "@blur / @focusout" with this. I want to hide the "suggestions div" if you click outside of the input text (basically cancel it) but NOT if you click on a suggestion.
And the suggestions themself are layered - like : <div class="name" ... <div class="company" ... so checking the blur event's target- if it is something you can actually click is kinda exhausting.
Unfortunately the blur event hits before the click event on a name / company. So you can't say "@click="getThatClick" - but the click-event isn't triggered as blur came first.
Adding @click.stop or so didn't help.
Any thoughts on this?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
