Solve menu arrow navigation

https://github.com/the-djmaze/snappymail/issues/22

dev/External/ko.js

@@ -48,9 +48,9 @@ ko.bindingHandlers.tooltipErrorTip = {
 	}
 };
 
-ko.bindingHandlers.registrateBootstrapDropdown = {
+ko.bindingHandlers.registerBootstrapDropdown = {
 	init: element => {
-		rl.Dropdowns.registrate(element);
+		rl.Dropdowns.register(element);
 		element.ddBtn = new BSN.Dropdown(element.querySelector('[data-toggle="dropdown"]'));
 	}
 };

dev/bootstrap.js

@@ -45,12 +45,9 @@ export default (App) => {
 	rl.Enums = Enums;
 
 	rl.Dropdowns = [];
-	rl.Dropdowns.registrate = function(element) {
+	rl.Dropdowns.register = function(element) { this.push(element); };
-		this.push(element);
-		element.addEventListener('click', () => rl.Dropdowns.detectVisibility());
-	};
 	rl.Dropdowns.detectVisibility = (() =>
-		dropdownVisibility(!!rl.Dropdowns.find(item => item.classList.contains('open')))
+		dropdownVisibility(!!rl.Dropdowns.find(item => item.classList.contains('show')))
 	).debounce(50);
 
 	rl.route = {

snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html

@@ -29,7 +29,7 @@
 				</div>
 				<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">&nbsp;</div>
 				<!-- ko if: !newMoveToFolder -->
-				<div class="btn-group dropdown colored-toggle hide-on-mobile" data-bind="visible: allowMessageListActions, registrateBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
+				<div class="btn-group dropdown colored-toggle hide-on-mobile" data-bind="visible: allowMessageListActions, registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
 					<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border dropdown-toggle buttonMove" data-toggle="dropdown" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
 						<i class="icon-copy visible-on-ctrl-btn"></i>
 						<i class="icon-folder hidden-on-ctrl-btn"></i>
@@ -73,7 +73,7 @@
 						<!--<span data-bind="text: printableMessageCountForDeletion()"></span>-->
 					</a>
 				</div>
-				<div class="btn-group dropdown colored-toggle" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registrateBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
+				<div class="btn-group dropdown colored-toggle" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
 					<a id="more-list-dropdown-id" class="btn single btn-dark-disabled-border dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
 						<i class="icon-list animate-this-icon-on-open"></i>
 					</a>

snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html

@@ -78,7 +78,7 @@
 
 				<div class="message-fixed-button-toolbar clearfix" data-bind="visible: message">
 					<div class="btn-group pull-right" style="margin-right: -11px;">
-						<div class="btn-group pull-right" data-bind="registrateBootstrapDropdown: true, visible: allowComposer || allowMessageListActions || allowMessageActions">
+						<div class="btn-group pull-right" data-bind="registerBootstrapDropdown: true, visible: allowComposer || allowMessageListActions || allowMessageActions">
 							<a class="btn btn-thin-2 btn-transparent last btn-dark-disabled-border dropdown-toggle buttonMore" id="more-view-dropdown-id" href="#" tabindex="-1" data-toggle="dropdown" style="margin-left: -4px; margin-right: 2px" data-bind="command: messageVisibilityCommand, css: {'first': !allowComposer}">
 									<span data-bind="visible: !allowComposer" class="icon-ellipsis-alt"></span>
 									<span data-bind="visible: allowComposer" class="caret"></span>

snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html

@@ -27,7 +27,7 @@
 						</label>
 					</div>
 					<div class="e-cell e-value">
-						<div class="dropdown pull-left" data-bind="registrateBootstrapDropdown: true, openDropdownTrigger: identitiesDropdownTrigger">
+						<div class="dropdown pull-left" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: identitiesDropdownTrigger">
 							<a class="dropdown-toggle e-identity" href="#" tabindex="-1"
 								id="identity-label-id" role="button" data-toggle="dropdown"
 								data-bind="text: currentIdentityView, dropdownCloser: true, css: {'multiply': 1 < identitiesOptions().length }">
@@ -45,7 +45,7 @@
 							<!-- /ko -->
 						</div>
 						<div class="pull-right">
-							<div class="btn-group dropdown colored-toggle pull-right" style="margin-right: 4px;" data-bind="registrateBootstrapDropdown: true">
+							<div class="btn-group dropdown colored-toggle pull-right" style="margin-right: 4px;" data-bind="registerBootstrapDropdown: true">
 								<a class="btn single dropdown-toggle buttonMore" data-toggle="dropdown">
 									<i class="icon-list"></i>
 								</a>

snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html

@@ -25,7 +25,7 @@
 				</a>
 			</div>
 
-			<div class="btn-group dropdown colored-toggle" data-bind="registrateBootstrapDropdown: true">
+			<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true">
 				<a id="contacts-more-dropdown-id" class="btn single dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown">
 					<i data-bind="css: {'icon-list': !contacts.importing() && !contacts.syncing(),
 						'icon-spinner animated': contacts.importing() || contacts.syncing()}"></i>
@@ -108,7 +108,7 @@
 			</div>
 		</div>
 		<div class="b-view-content-toolbar btn-toolbar" data-bind="css: {'read-only': viewReadOnly}">
-			<div class="btn-group pull-right dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registrateBootstrapDropdown: true">
+			<div class="btn-group pull-right dropdown colored-toggle button-add-prop" data-bind="visible: !emptySelection(), registerBootstrapDropdown: true">
 				<a id="button-add-prop-dropdown-id" href="#" tabindex="-1" class="btn single dropdown-toggle" data-toggle="dropdown">
 					<span class="i18n" data-i18n="CONTACTS/ADD_MENU_LABEL"></span>
 					&nbsp;&nbsp;

snappymail/v/0.0.0/app/templates/Views/User/SystemDropDown.html

@@ -1,7 +1,7 @@
 <div class="b-system-drop-down g-ui-user-select-none">
 	<div class="b-toolbar">
 		<div class="btn-toolbar">
-			<div class="btn-group btn-group-last pull-right dropdown colored-toggle" data-bind="registrateBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger">
+			<div class="btn-group btn-group-last pull-right dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger">
 				<a id="top-system-dropdown-id" href="#" tabindex="-1" class="btn single btn-ellipsis btn-block dropdown-toggle system-dropdown" data-toggle="dropdown">
 					<i data-bind="css: {'icon-user': !accounts.loading(), 'icon-spinner animated': accounts.loading()}"></i>
 <!--

vendors/bootstrap/js/bootstrap.native.js

@@ -42,32 +42,26 @@
 				},
 				preventScroll = e => (e.key === 'ArrowUp' || e.key === 'ArrowDown') && e.preventDefault(),
 				keyHandler = e => {
-					let activeItem = doc.activeElement,
+					if (e.key === 'Escape') {
-						isSameElement = activeItem === element,
-						isInsideMenu = menu.contains(activeItem),
-						isMenuItem = activeItem.parentNode === menu || activeItem.parentNode.parentNode === menu,
-						idx = menuItems.indexOf(activeItem);
-					if ( isMenuItem ) {
-						idx = isSameElement ? 0
-							: e.key === 'ArrowUp' ? (idx>1?idx-1:0)
-							: e.key === 'ArrowDown' ? (idx<menuItems.length-1?idx+1:idx) : idx;
-						menuItems[idx] && setFocus(menuItems[idx]);
-					}
-					if ( (menuItems.length && isMenuItem
-						|| !menuItems.length && (isInsideMenu || isSameElement)
-						|| !isInsideMenu )
-						&& element.open && e.key === 'Escape'
-					) {
 						self.toggle();
+					} else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+						let activeItem = doc.activeElement,
+							isMenuButton = activeItem === element,
+							idx = isMenuButton ? 0 : menuItems.indexOf(activeItem);
+						if (parent.contains(activeItem)) {
+							if (!isMenuButton) {
+								idx = e.key === 'ArrowUp' ? (idx > 1 ? idx-1 : 0)
+									: e.key === 'ArrowDown' ? (idx < menuItems.length-1 ? idx+1 : idx) : idx;
+							}
+							menuItems[idx] && setFocus(menuItems[idx]);
+						} else {
+							console.log('activeElement not in menu');
+						}
 					}
 				};
 			self.show = () => {
 				menu = parent.querySelector('.dropdown-menu');
-				menuItems = [];
+				menuItems = [...menu.querySelectorAll('A')].filter(item => 'none' != item.parentNode.style.display);
-				[...menu.children].forEach(child => {
-					child.children.length && (child.children[0].tagName === 'A' && menuItems.push(child.children[0]));
-					child.tagName === 'A' && menuItems.push(child);
-				});
 				!('tabindex' in menu) && menu.setAttribute('tabindex', '0');
 				menu.classList.add('show');
 				parent.classList.add('show');
@@ -88,7 +82,7 @@
 				setFocus(element);
 				setTimeout(() => element.Dropdown && element.addEventListener('click',clickHandler), 1);
 			};
-			self.toggle = () => (parent.classList.contains('show') && element.open) ? self.hide() : self.show();
+			self.toggle = () => element.open ? self.hide() : self.show();
 			element.addEventListener('click',clickHandler);
 			element.open = false;
 			element.Dropdown = self;