Select triggers MouseLeave event on parent element in Mozilla Firefox

Question

I have the following problem: In Mozilla Firefox, whenever I hover a dropdown inside a table, it triggers the mouseleave event of the table, though the mouse cursor is still inside the table. There is no such problem in Chrome or Edge.

Here is my code with an example data:

DEMO

I have a table and the last row appears when the mouse cursor enters the table. When the mouse leaves - the row hides. The row should hide only if i leave the table

Is there some way or a workaround to prevent the unnecessary mouseleave event to occur?

Answer 1

I had the same issue in VueJS and I fixed it like this. First make sure the event object is passed to your method, so use @mouseleave="myEvent" instead of @mouseleave="myEvent()".

    myEvent: function(event) {
      if (event.relatedTarget === null) {
        return;
      }
      // consider event fired
    },

So checking the event.target.nodeName didn't work for me, I had to use event.relatedTarget.

Answer 2

You can test for select on mouseleave like this:

$('.testTable').mouseenter(function(e) {
    console.log("IN!")
    $("#lastRow").show();
}).mouseleave(function(e) {
    if (e.target.nodeName.toLowerCase() !== "select") {
        console.log("OUT!")
        $("#lastRow").hide();
    }
}); 

Fiddle here.