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.