Fix keydown in menu

This commit is contained in:
Julia Radzhabova 2021-09-19 21:28:47 +03:00
parent 9be440c3b3
commit 5fa14b63fe
3 changed files with 33 additions and 81 deletions

View file

@ -171,6 +171,7 @@ define([
this.menuAlignEl = this.options.menuAlignEl;
this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
this.search = this.options.search;
this.outerMenu = this.options.outerMenu;
if (this.options.restoreHeight) {
this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
@ -267,6 +268,7 @@ define([
this.parentEl.on('hide.bs.dropdown', _.bind(me.onBeforeHideMenu, me));
this.parentEl.on('hidden.bs.dropdown', _.bind(me.onAfterHideMenu, me));
this.parentEl.on('keydown.after.bs.dropdown', _.bind(me.onAfterKeydownMenu, me));
this.parentEl.on('keydown.before.bs.dropdown', _.bind(me.onBeforeKeydownMenu, me));
this.options.innerMenus && this.on('keydown:before', _.bind(me.onBeforeKeyDown, me));
menuRoot.hover(
@ -454,6 +456,21 @@ define([
}
},
onBeforeKeydownMenu: function(e) {
if (e.isDefaultPrevented() || !(this.outerMenu && this.outerMenu.menu))
return;
if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {
var $items = this.menuRoot.find('> li').find('> a'),
index = $items.index($items.filter(':focus'));
if (e.keyCode==Common.UI.Keys.UP && index==0 || e.keyCode == Common.UI.Keys.DOWN && index==$items.length-1) {
this.outerMenu.menu.focusOuter(e, this.outerMenu.index);
e.preventDefault();
e.stopPropagation();
}
}
},
selectCandidate: function() {
var index = this._search.index || 0,
re = new RegExp('^' + ((this._search.full) ? this._search.text : this._search.char), 'i'),

View file

@ -367,40 +367,6 @@ define([
}, this);
},
focusInner: function(menu, e) {
if (e.keyCode == Common.UI.Keys.UP)
menu.items[menu.items.length-1].cmpEl.find('> a').focus();
else
menu.items[0].cmpEl.find('> a').focus();
},
focusOuter: function(menu, e) {
menu.items[2].cmpEl.find('> a').focus();
},
onBeforeKeyDown: function(menu, e) {
if (e.keyCode == Common.UI.Keys.RETURN) {
e.preventDefault();
e.stopPropagation();
var li = $(e.target).closest('li');
(li.length>0) && li.click();
Common.UI.Menu.Manager.hideAll();
} else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) {
var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', menu.$el).find('> a');
if (!$items.length) return;
var index = $items.index($items.filter(':focus')),
me = this;
if (menu._outerMenu && (e.keyCode == Common.UI.Keys.UP && index==0 || e.keyCode == Common.UI.Keys.DOWN && index==$items.length - 1) ||
menu._innerMenu && (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) && index!==-1) {
e.preventDefault();
e.stopPropagation();
_.delay(function() {
menu._outerMenu ? me.focusOuter(menu._outerMenu, e) : me.focusInner(menu._innerMenu, e);
}, 10);
}
}
},
setButtonMenu: function(btn, name) {
var me = this,
arr = [],
@ -445,12 +411,13 @@ define([
_.delay(function() {
menu._innerMenu && menu._innerMenu.cmpEl.focus();
}, 10);
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this));
});
var menu = new Common.UI.Menu({
maxHeight: 300,
cls: 'internal-menu',
items: arr
items: arr,
outerMenu: {menu: btn.menu, index: 0}
});
menu.render(btn.menu.items[0].cmpEl.children(':first'));
menu.cmpEl.css({
@ -462,9 +429,9 @@ define([
menu.cmpEl.attr({tabindex: "-1"});
menu.on('item:click', function (menu, item, e) {
me.fireEvent('function:apply', [{name: item.caption, origin: item.value}, false, name]);
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this));
});
btn.menu._innerMenu = menu;
menu._outerMenu = btn.menu;
btn.menu.setInnerMenu([{menu: menu, index: 0}]);
}
}
Common.Utils.lockControls(SSE.enumLock.noSubitems, arr.length<1, {array: [btn]});
@ -509,8 +476,7 @@ define([
_.delay(function() {
menu._innerMenu && menu._innerMenu.items[0].cmpEl.find('> a').focus();
}, 10);
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this))
.on('keydown:before', function(menu, e) {
}).on('keydown:before', function(menu, e) {
if (e.keyCode == Common.UI.Keys.LEFT || e.keyCode == Common.UI.Keys.ESC) {
var $parent = menu.cmpEl.parent();
if ($parent.hasClass('dropdown-submenu') && $parent.hasClass('over')) { // close submenu
@ -524,13 +490,15 @@ define([
var menu = new Common.UI.Menu({
maxHeight: 300,
cls: 'internal-menu',
items: arr
items: arr,
outerMenu: {menu: mnu.menu, index: 0}
});
menu.on('item:click', function (menu, item, e) {
me.fireEvent('function:apply', [{name: item.caption, origin: item.value}, false, name]);
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this));
});
mnu.menu._innerMenu = menu;
menu._outerMenu = mnu.menu;
mnu.menu.setInnerMenu([{menu: menu, index: 0}]);
return mnu;
}
}

View file

@ -254,40 +254,6 @@ define([
});
},
focusInner: function(menu, e) {
if (e.keyCode == Common.UI.Keys.UP)
menu.items[menu.items.length-1].cmpEl.find('> a').focus();
else
menu.items[0].cmpEl.find('> a').focus();
},
focusOuter: function(menu, e) {
menu.items[2].cmpEl.find('> a').focus();
},
onBeforeKeyDown: function(menu, e) {
if (e.keyCode == Common.UI.Keys.RETURN) {
e.preventDefault();
e.stopPropagation();
var li = $(e.target).closest('li');
(li.length>0) && li.click();
Common.UI.Menu.Manager.hideAll();
} else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) {
var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', menu.$el).find('> a');
if (!$items.length) return;
var index = $items.index($items.filter(':focus')),
me = this;
if (menu._outerMenu && (e.keyCode == Common.UI.Keys.UP && index==0 || e.keyCode == Common.UI.Keys.DOWN && index==$items.length - 1) ||
menu._innerMenu && (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) && index!==-1) {
e.preventDefault();
e.stopPropagation();
_.delay(function() {
menu._outerMenu ? me.focusOuter(menu._outerMenu, e) : me.focusInner(menu._innerMenu, e);
}, 10);
}
}
},
setButtonMenu: function(btn) {
var me = this,
arr = [{caption: me.textDefault, value: 'default', checkable: true, allowDepress: false}];
@ -312,12 +278,13 @@ define([
}, 10);
}).on('show:before', function (menu, e) {
me.fireEvent('viewtab:showview');
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this));
});
var menu = new Common.UI.Menu({
maxHeight: 300,
cls: 'internal-menu',
items: arr
items: arr,
outerMenu: {menu: btn.menu, index: 0}
});
menu.render(btn.menu.items[0].cmpEl.children(':first'));
menu.cmpEl.css({
@ -330,9 +297,9 @@ define([
menu.on('item:toggle', function (menu, item, state, e) {
if (!!state)
me.fireEvent('viewtab:openview', [{name: item.caption, value: item.value}]);
}).on('keydown:before', _.bind(me.onBeforeKeyDown, this));
});
btn.menu._innerMenu = menu;
menu._outerMenu = btn.menu;
btn.menu.setInnerMenu([{menu: menu, index: 0}]);
},
show: function () {