New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mouseleave incorrectly triggered on select boxes in some browsers #3558

Closed
ilyavolodin opened this Issue Mar 2, 2017 · 6 comments

Comments

Projects
None yet
5 participants
@ilyavolodin

ilyavolodin commented Mar 2, 2017

Description

"mouseleave" event will be triggered on a parent element when child select box is opened and user hovers over available options. Repro case is linked below. This has been tested on IE11 (Windows 10) and Firefox 51.0.1 (OSX) with failed results. Latest Chrome on both Windows and OSX, Edge and Safari 10.0.3 are working correctly and do not trigger "mouseleave" event. This is happening with latest version of jQuery, but was also happening with version 2.x as well. As "mouseleave" is simulated event, I expected it to work the same way in all browsers.

Link to test case

Link to repro case: https://jsfiddle.net/wukp7vv4/

@luis140219

This comment has been minimized.

Show comment
Hide comment
@luis140219

luis140219 Mar 2, 2017

Have you tested all the branches (1.x, 2.x and 3.x)? If the answer is no, tell me what branches you didn't test.

luis140219 commented Mar 2, 2017

Have you tested all the branches (1.x, 2.x and 3.x)? If the answer is no, tell me what branches you didn't test.

@ilyavolodin

This comment has been minimized.

Show comment
Hide comment
@ilyavolodin

ilyavolodin Mar 2, 2017

Yes, I verified it with 1.12.4, 2.2.4 and 3.1.1. All of them have the same issue.

ilyavolodin commented Mar 2, 2017

Yes, I verified it with 1.12.4, 2.2.4 and 3.1.1. All of them have the same issue.

@luis140219

This comment has been minimized.

Show comment
Hide comment
@luis140219

luis140219 Mar 2, 2017

I've just tested 1.12.4 in IE11 + Windows 8.1. It also has the bug. https://jsfiddle.net/fhkkbgmy/2/

luis140219 commented Mar 2, 2017

I've just tested 1.12.4 in IE11 + Windows 8.1. It also has the bug. https://jsfiddle.net/fhkkbgmy/2/

@dmethvin

This comment has been minimized.

Show comment
Hide comment
@dmethvin

dmethvin Mar 6, 2017

Member

In Windows 10 IE11 I see the problem in this code. IE11 says event.relatedTarget is null indicating that it's leaving the enclosing div, that would normally mean it's leaving the browser window. Most likely this is due to IE's implementation of the browser control. Although jQuery uses mouseout to simulate mouseleave, it appears that the IE11 native mouseleave suffers the same problem and fires when you move into the opened select.

I couldn't reproduce the issue on Windows 10 Firefox 51 but perhaps on iOS Firefox has the same problem.

I don't see a workaround here, do you? If not I'm inclined to close this as a cantfix.

Member

dmethvin commented Mar 6, 2017

In Windows 10 IE11 I see the problem in this code. IE11 says event.relatedTarget is null indicating that it's leaving the enclosing div, that would normally mean it's leaving the browser window. Most likely this is due to IE's implementation of the browser control. Although jQuery uses mouseout to simulate mouseleave, it appears that the IE11 native mouseleave suffers the same problem and fires when you move into the opened select.

I couldn't reproduce the issue on Windows 10 Firefox 51 but perhaps on iOS Firefox has the same problem.

I don't see a workaround here, do you? If not I'm inclined to close this as a cantfix.

@ilyavolodin

This comment has been minimized.

Show comment
Hide comment
@ilyavolodin

ilyavolodin Mar 6, 2017

@dmethvin The way I worked around this issue is by adding this code:

$('.mini-cart').on('mouseleave', function (event) {
  if ($('mini-cart').has(event.target).length > 0) {
    event.stopPropagation();
    return;
  }
  // process leave event here
});

You are correct, event.relatedTarget is set to null. That's what I've tried first. But event.target is set to the select box. So verifying if current target is part of the element that has event registered on it seems to work for both IE on Windows, and Firefox on OSX.

ilyavolodin commented Mar 6, 2017

@dmethvin The way I worked around this issue is by adding this code:

$('.mini-cart').on('mouseleave', function (event) {
  if ($('mini-cart').has(event.target).length > 0) {
    event.stopPropagation();
    return;
  }
  // process leave event here
});

You are correct, event.relatedTarget is set to null. That's what I've tried first. But event.target is set to the select box. So verifying if current target is part of the element that has event registered on it seems to work for both IE on Windows, and Firefox on OSX.

@timmywil

This comment has been minimized.

Show comment
Hide comment
@timmywil

timmywil Mar 27, 2017

Member

We looked into this and we're not sure we can fix this from jQuery's side. If anyone comes up with a solution, please feel free to post here and we'll re-open.

Member

timmywil commented Mar 27, 2017

We looked into this and we're not sure we can fix this from jQuery's side. If anyone comes up with a solution, please feel free to post here and we'll re-open.

@timmywil timmywil closed this Mar 27, 2017

@timmywil timmywil added wontfix and removed Needs review labels Mar 27, 2017

molnarm added a commit to molnarm/igemutato that referenced this issue Apr 29, 2017

#20.
Chrome-ban a select megnyitásakor két mouseout event jön egymás után: az elsőnél a select a relatedtarget, a másodiknál null, a selecten belül mozogva már nincs újabb. Firefoxban és IE-ben a nullos event később, a selecten belül mozogva érkezik csak (ez okozza a hibát), Edge-ben egyáltalán nincs ilyen.

Talán hasonló észrevétel ez is: jquery/jquery#3558

@lock lock bot locked as resolved and limited conversation to collaborators Jun 18, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.