From 592d695f179329f23342927dee05a9c676dded2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 18 Apr 2017 16:51:23 -0400 Subject: [PATCH 1/3] Menu: Ignore mouse events triggered due to page scrolling Fixes #9356 --- ui/widgets/menu.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/ui/widgets/menu.js b/ui/widgets/menu.js index 49da2686579..65c8bece260 100644 --- a/ui/widgets/menu.js +++ b/ui/widgets/menu.js @@ -64,6 +64,7 @@ return $.widget( "ui.menu", { // Flag used to prevent firing of the click handler // as the event bubbles up through nested menus this.mouseHandled = false; + this.lastMousePosition = { x: null, y: null }; this.element .uniqueId() .attr( { @@ -116,6 +117,17 @@ return $.widget( "ui.menu", { return; } + // If the mouse didn't actually move, but the page was scrolled, ignore the event (#9356) + if ( event.clientX === this.lastMousePosition.x && + event.clientY === this.lastMousePosition.y ) { + return; + } + + this.lastMousePosition = { + x: event.clientX, + y: event.clientY + }; + var actualTarget = $( event.target ).closest( ".ui-menu-item" ), target = $( event.currentTarget ); From 180dbc5ffecebddf4dd6894c0ffcc1f9f99aee1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 19 Apr 2017 15:41:59 -0400 Subject: [PATCH 2/3] fixup! Menu: Ignore mouse events triggered due to page scrolling --- ui/widgets/menu.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/widgets/menu.js b/ui/widgets/menu.js index 65c8bece260..98cf3889a2a 100644 --- a/ui/widgets/menu.js +++ b/ui/widgets/menu.js @@ -117,7 +117,9 @@ return $.widget( "ui.menu", { return; } - // If the mouse didn't actually move, but the page was scrolled, ignore the event (#9356) + // When the page is scrolled, a mousemove event is triggered because the mouse may + // be over a different element now. We don't want page scrolling to cause menu items + // to become active, so we need to detect this case and ignore it. (#9356) if ( event.clientX === this.lastMousePosition.x && event.clientY === this.lastMousePosition.y ) { return; From 70f826d88a80cb7231a98d6655071aff3df7ea1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 19 Apr 2017 16:01:29 -0400 Subject: [PATCH 3/3] Fixup: Random clientX/Y values in tests --- tests/unit/selectmenu/core.js | 4 ++-- tests/unit/selectmenu/events.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/unit/selectmenu/core.js b/tests/unit/selectmenu/core.js index cef6dc5bfd3..7084523127a 100644 --- a/tests/unit/selectmenu/core.js +++ b/tests/unit/selectmenu/core.js @@ -251,13 +251,13 @@ $.each( [ wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); button.trigger( "click" ); - wrappers.first().simulate( "mouseover" ).trigger( "click" ); + wrappers.first().simulate( "mouseover", { clientX: 2, clientY: 2 } ).trigger( "click" ); assert.equal( element[ 0 ].selectedIndex, 0, "First item is selected" ); button.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); assert.equal( element[ 0 ].selectedIndex, 0, "No looping beyond first item" ); button.trigger( "click" ); - wrappers.last().simulate( "mouseover" ).trigger( "click" ); + wrappers.last().simulate( "mouseover", { clientX: 3, clientY: 3 } ).trigger( "click" ); assert.equal( element[ 0 ].selectedIndex, wrappers.length - 1, "Last item is selected" ); button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); assert.equal( element[ 0 ].selectedIndex, wrappers.length - 1, "No looping behind last item" ); diff --git a/tests/unit/selectmenu/events.js b/tests/unit/selectmenu/events.js index 4aed70ac80b..ffc0429eede 100644 --- a/tests/unit/selectmenu/events.js +++ b/tests/unit/selectmenu/events.js @@ -89,9 +89,9 @@ QUnit.test( "focus", function( assert ) { button.trigger( "click" ); links = menu.find( "li.ui-menu-item" ); optionIndex = 0; - links.eq( optionIndex ).simulate( "mouseover" ); + links.eq( optionIndex ).simulate( "mouseover", { clientX: 2, clientY: 2 } ); optionIndex += 1; - links.eq( optionIndex ).simulate( "mouseover" ); + links.eq( optionIndex ).simulate( "mouseover", { clientX: 3, clientY: 3 } ); // This tests for unwanted, additional focus event on close that.element.selectmenu( "close" );