Skip to content

Menu: Handle mouse movement mixed with keyboard navigation #1805

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.

Sign up for GitHub

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

Closed
wants to merge 1 commit into from
Closed

Menu: Handle mouse movement mixed with keyboard navigation #1805

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 33 additions & 23 deletions ui/widgets/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,8 @@ return $.widget( "ui.menu", {
// them (focus should always stay on UL during navigation).
"mousedown .ui-menu-item": function( event ) {
event.preventDefault();

this._activateItem( event );
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We activate on mousedown to handle the scenario of moving the mouse over an item, navigating away from that item with they keyboard, then clicking with the mouse. Since we won't get a mouseenter or mousemove, we need to activate on mousedown. This matches the OS X menu behavior.

},
"click .ui-menu-item": function( event ) {
var target = $( event.target );
Expand Down Expand Up @@ -107,29 +109,8 @@ return $.widget( "ui.menu", {
}
}
},
"mouseenter .ui-menu-item": function( event ) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This method was moved to _activateItem().


// Ignore mouse events while typeahead is active, see #10458.
// Prevents focusing the wrong item when typeahead causes a scroll while the mouse
// is over an item in the menu
if ( this.previousFilter ) {
return;
}

var actualTarget = $( event.target ).closest( ".ui-menu-item" ),
target = $( event.currentTarget );

// Ignore bubbled events on parent items, see #11641
if ( actualTarget[ 0 ] !== target[ 0 ] ) {
return;
}

// Remove ui-state-active class from siblings of the newly focused menu item
// to avoid a jump caused by adjacent elements both having a class with a border
this._removeClass( target.siblings().children( ".ui-state-active" ),
null, "ui-state-active" );
this.focus( event, target );
},
"mouseenter .ui-menu-item": "_activateItem",
"mousemove .ui-menu-item": "_activateItem",
mouseleave: "collapseAll",
"mouseleave .ui-menu": "collapseAll",
focus: function( event, keepActiveItem ) {
Expand Down Expand Up @@ -171,6 +152,35 @@ return $.widget( "ui.menu", {
} );
},

_activateItem: function( event ) {

// Ignore mouse events while typeahead is active, see #10458.
// Prevents focusing the wrong item when typeahead causes a scroll while the mouse
// is over an item in the menu
if ( this.previousFilter ) {
return;
}

var actualTarget = $( event.target ).closest( ".ui-menu-item" ),
target = $( event.currentTarget );

// Ignore bubbled events on parent items, see #11641
if ( actualTarget[ 0 ] !== target[ 0 ] ) {
return;
}

// If the item is already active, there's nothing to do
if ( target.is( ".ui-state-active" ) ) {
return;
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This conditional is the only thing that changed in this method. This is just the avoid the expensive work that follows.


// Remove ui-state-active class from siblings of the newly focused menu item
// to avoid a jump caused by adjacent elements both having a class with a border
this._removeClass( target.siblings().children( ".ui-state-active" ),
null, "ui-state-active" );
this.focus( event, target );
},

_destroy: function() {
var items = this.element.find( ".ui-menu-item" )
.removeAttr( "role aria-disabled" ),
Expand Down