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?

Zampardi

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.

Lerma

Awesome! It worked here – Elicia

Can anyone explain why this works? – Openwork

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.

Activism

I came up with a similar solution. Although this does not fix the problem entirely. If you hover from the dropdown to the right/left and back, it will still trigger the mouseleave because the target will be <td>. – Ponytail

Yeah it's really close to what I need but still doesn't work well. It should not fire it at all if the cursor is inside the table. But thanks anyway :) – Zampardi

Yeah, seems like a FF limitation based on how they implement the component. I'm not sure if there's another workaround (but if you find one you should definitely post it as an answer to help others who come across this). Tricky one, but an interesting question! – Activism