Why mouseleave event got triggered by autocomplete input

Question

i have a div with an event mouseleave attach to it. The div has a form inside.

<div class='dropdown'>
 <form>
   <input type='email' name='email' placeholder='email'/>
 </form>
</div>

the problem comes when i click the input and the browser display the autocomplete list.

if i move the cursor to select the proper email. the mouseleave trigger the event, but i didnt leave the div, i just because autocomplete seems to be something external from the browser, so i got this non-desired behavior.

any suggestion about how to detect this case?

i just need vanilla javascript response ( but if you have a jquery approach is fine so i can check the code behind )

thanks in advance

Answer 1

If you have a working code snippet, it would be helpful. Considering the information that you provide, let me summarise the problems .

1. You have a div element where you monitor the mouse event and have input element inside the div where the auto completes is enabled.
2. Each time you interact with the autocomplete dropdown, it triggers the mouse leave event.

While your goal is:

1. Only trigger the mouse leave event when user drag the mouse outside of your div element

There are two solution for your problem:

1. Disable your autocomplete on the input
2. If you desire to have the autocomplete on the input. You need to consider to change mouse event to be monitored. You should monitor "mouseout" instead of "mouseleave" event. Please refer to following link to understand the difference between "mouseout" vs "mouseleave": w3schools . TLDR: mouseout event triggers when the mouse pointer leaves any child elements as well the selected element.

Please see following code snippet for the solution #2.

 function generateHappyMeals (nodeName) { console.log('HAPPY MEALS from', nodeName); }; function MouseTrack(e) { // Target nodeName represent the node name of the target element // Based on HTML example, when you move out your cursor, you should have three nodenames: DIV, FORM, INPUT which represent the target element that triggers the MouseTrack function. const nodeName = e.target.nodeName; // console.log(nodeName); if (nodeName === 'DIV') { // Do something when mouse event triggered by #card div element //....example: generateHappyMeals(nodeName); } }; document.querySelector('#card').addEventListener('mouseout', MouseTrack);

 #card { background-color: gainsboro; padding: 36px; }

 <div id='card'> <form> <input type='email' name='email' placeholder='email'/> </form> </div>

Happy Hacking !

Answer 2

I would still use a mouseleave listener, but only hide the dropdown if the mouse coordinates are outside the box.

<div class='dropdown' id="login">
 <form>
   <input type='email' name='email' placeholder='email'/>
 </form>
</div>

<script>
   const loginBox = document.getElementById('login');
   loginBox.addEventListener("mouseleave", function(event){
        const wrapperBounding = loginBox.getBoundingClientRect();
        if (event.clientX >= loginBox.left && event.clientX <= loginBox.right &&
            event.clientY >= loginBox.top && event.clientY <= loginBox.bottom) {
            return
        }
        
        hideDropdown(); 
  });
</script>

This will make sure that the dropdown only disappears if the mouse is actually moved out. It will also prevent that your dropdown gets closed because of other plugins, see How to prevent mouse-leave for plugin icon?

Answer 3

I've found that when using the mouseleave() event, the "toElement" in the event properties is null when moving the cursor to the autofill popup. This should not be the case when moving the cursor anywhere else on your website.

So if the mouseleave() event should only happen when moving your cursor somewhere else on your website and it doesn't matter if it's going "outside" to any browser created element like autofill or tabs bar then this would work, as did for me:

mouseLeaveEvent(e) {

   if (e.toElement === null) {
       return
   }

   // Your code here

}