Permalink
Browse files

fix: vjs-lock-showing class gets removed from menu when no longer hov…

…ering on menu-button. (#5465)

Fixes #1690
  • Loading branch information...
gjanblaszczyk authored and gkatsev committed Nov 2, 2018
1 parent aed337a commit 58f638e99daf9e5f4cfb2b6c34c82b84230170b6
Showing with 33 additions and 12 deletions.
  1. +7 −11 src/js/menu/menu-button.js
  2. +26 −1 src/js/menu/menu.js
@@ -51,7 +51,9 @@ class MenuButton extends Component {
this.on(this.menuButton_, 'click', this.handleClick);
this.on(this.menuButton_, 'focus', this.handleFocus);
this.on(this.menuButton_, 'blur', this.handleBlur);

this.on(this.menuButton_, 'mouseenter', () => {
this.menu.show();
});
this.on('keydown', this.handleSubmenuKeyPress);
}

@@ -221,14 +223,6 @@ class MenuButton extends Component {
* @listens click
*/
handleClick(event) {
// When you click the button it adds focus, which will show the menu.
// So we'll remove focus when the mouse leaves the button. Focus is needed
// for tab navigation.

this.one(this.menu.contentEl(), 'mouseleave', Fn.bind(this, function(e) {
this.unpressButton();
this.el_.blur();
}));
if (this.buttonPressed_) {
this.unpressButton();
} else {
@@ -299,8 +293,8 @@ class MenuButton extends Component {
// Set focus back to the menu button's button
this.menuButton_.el_.focus();
}
// Up (38) key or Down (40) key press the 'button'
} else if (event.which === 38 || event.which === 40) {
// Enter (13) or Up (38) key or Down (40) key press the 'button'
} else if (event.which === 13 || event.which === 38 || event.which === 40) {
if (!this.buttonPressed_) {
this.pressButton();
event.preventDefault();
@@ -339,6 +333,7 @@ class MenuButton extends Component {
pressButton() {
if (this.enabled_) {
this.buttonPressed_ = true;
this.menu.show();
this.menu.lockShowing();
this.menuButton_.el_.setAttribute('aria-expanded', 'true');

@@ -360,6 +355,7 @@ class MenuButton extends Component {
if (this.enabled_) {
this.buttonPressed_ = false;
this.menu.unlockShowing();
this.menu.hide();
this.menuButton_.el_.setAttribute('aria-expanded', 'false');
}
}
@@ -2,6 +2,7 @@
* @file menu.js
*/
import Component from '../component.js';
import document from 'global/document';
import * as Dom from '../utils/dom.js';
import * as Fn from '../utils/fn.js';
import * as Events from '../utils/events.js';
@@ -45,7 +46,8 @@ class Menu extends Component {
*/
addItem(component) {
this.addChild(component);
component.on('click', Fn.bind(this, function(event) {
component.on('blur', Fn.bind(this, this.handleBlur));
component.on(['tap', 'click'], Fn.bind(this, function(event) {
// Unpress the associated MenuButton, and move focus back to it
if (this.menuButton_) {
this.menuButton_.unpressButton();
@@ -97,6 +99,29 @@ class Menu extends Component {
super.dispose();
}

/**
* Called when a `MenuItem` loses focus.
*
* @param {EventTarget~Event} event
* The `blur` event that caused this function to be called.
*
* @listens blur
*/
handleBlur(event) {
const relatedTarget = event.relatedTarget || document.activeElement;

// Close menu popup when a user clicks outside the menu
if (!this.children().some((element) => {
return element.el() === relatedTarget;
})) {
const btn = this.menuButton_;

if (btn && btn.buttonPressed_ && relatedTarget !== btn.el().firstChild) {
btn.unpressButton();
}
}
}

/**
* Handle a `keydown` event on this menu. This listener is added in the constructor.
*

0 comments on commit 58f638e

Please sign in to comment.