I have a situation where a parent element contains an input:
<div @blur="onLeaveSelect($event)">
<div v-if="searchActivated" >
<input type="text" placeholder="Search..." @mousedown.stop>
</div>
...
</div>
When I click on the input
child element, it triggers the blur
event of the parent div
. How can this behavior be prevented? Using click.stop
to stop bubbling works for other elements, but not for this input.
const onLeaveSelect = (evt) => {
if (!evt.currentTarget.contains(evt.relatedTarget)) {
open.value = false;
showDescription.value = false;
searchActivated.value = false;
}
}
By implementing this solution, I managed to prevent the dropdown from closing when clicking on the input. However, now the issue is that focusing
on the input no longer registers as focusing on the parent div, causing the blur event not to be detected properly.