I have a list of elements, representing posts, and each one has two child elements. The first child-element is the post itself, the second is two arrows for moving the element up and down. The second child-element only appears when I hover over the parent container. The issue I have is that when I click on an arrow, up or down, I want to make the child-element disappear, but it doesn't, because I am still inside the parent.
The appearance of the second child-element is dependent on a Boolean variable (showArrows) which I toggle, so I tried to make that Boolean false, but the child-element still doesn't disappear, because the mouse is still inside.
I tried to dispatch a mouseleave event on click, but again it doesn't work because the mouse is still inside.
I tried to dispatch a mouseleave event AND add a class that adds no pointer events, and that's the only thing that works, HOWEVER, the issue now is that I have to find a way to remove the pointer-events otherwise hovering over the parent doesn't show the element again. Adding extra code to remove the pointer-events just makes the code too convoluted in my opinion, so I was wondering if there isn't a better way to do what I want.
Here's my current code:
handleMovePost(e) {
this.showPostIndex = parseInt(e.target.firstElementChild.firstElementChild.innerHTML) -1
this.showArrows = !this.showArrows
},
toggleShowArrows() {
const movedElement = document.querySelector('.movePost').closest('.post-wrapper')
movedElement.classList.toggle('remove')
let evt = new MouseEvent("mouseleave");
movedElement.dispatchEvent(evt);
}<template>
<div class="container">
<div class="list-wrapper">
<div v-for="(post, index) in posts" :key="index" class="post-wrapper" @mouseenter="handleMovePost" @mouseleave="handleMovePost">
<div class="post">
<span class="post__index">{{index+1}}</span>
<span>{{post}}</span>
<span class="close__icon" @click="$emit('removePost', index)">X</span>
</div>
<div class="movePost" v-if="showArrows && showPostIndex === index">
<span @click="$emit('movePost', index, 'up'); toggleShowArrows()">
<font-awesome-icon icon="fa-solid fa-arrow-up" />
</span>
<span @click="$emit('movePost', index, 'down')">
<font-awesome-icon icon="fa-solid fa-arrow-down" />
</span>
</div>
</div>
</div>
</div>
</template>I'm doing this on Vue, but I don't think that matters.