#11 Context menu closes on the next mouse interaction, instead of whe…

…n the mouse leaves the context menu.
mhutchie · Feb 23, 2019 · 84d560e · 84d560e
1 parent 3eccc50
commit 84d560e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/media/main.css b/media/main.css
@@ -326,7 +326,7 @@ svg.openFolderIcon, svg.closedFolderIcon, svg.fileIcon{
 	display:none;
 	position:absolute;
 	background-color:var(--vscode-menu-background);
-	box-shadow:0 1px 3px 1px var(--vscode-widget-shadow);
+	box-shadow:0 1px 4px 1px var(--vscode-widget-shadow);
 	color:var(--vscode-menu-foreground);
 	list-style-type:none;
 	margin:0;

diff --git a/web/main.ts b/web/main.ts
@@ -544,7 +544,6 @@
 				], sourceElem);
 			});
 			addListenerToClass('commit', 'click', (e: Event) => {
-				e.stopPropagation();
 				let sourceElem = <HTMLElement>(<Element>e.target).closest('.commit')!;
 				if (this.expandedCommit !== null && this.expandedCommit.hash === sourceElem.dataset.hash!) {
 					this.hideCommitDetails();
@@ -871,6 +870,7 @@
 			html += '<li class="contextMenuItem" data-index="' + i + '">' + items[i].title + '</li>';
 		}
 
+		hideContextMenuListener();
 		contextMenu.style.opacity = '0';
 		contextMenu.className = 'active';
 		contextMenu.innerHTML = html;
@@ -880,10 +880,10 @@
 		contextMenu.style.opacity = '1';
 
 		addListenerToClass('contextMenuItem', 'click', (e) => {
+			e.stopPropagation();
 			hideContextMenu();
 			items[parseInt((<HTMLElement>(e.target)).dataset.index!)].onClick();
 		});
-		contextMenu.addEventListener('mouseleave', hideContextMenu);
 
 		contextMenuSource = sourceElem;
 		contextMenuSource.classList.add('contextMenuActive');
@@ -893,7 +893,6 @@
 		contextMenu.innerHTML = '';
 		contextMenu.style.left = '0px';
 		contextMenu.style.top = '0px';
-		contextMenu.removeEventListener('mouseleave', hideContextMenu);
 		if (contextMenuSource !== null) {
 			contextMenuSource.classList.remove('contextMenuActive');
 			contextMenuSource = null;
@@ -973,7 +972,18 @@
 			dialogMenuSource = null;
 		}
 	}
+
+	/* Global Listeners */
 	document.addEventListener('keyup', (e) => {
-		if (e.key === 'Escape' && dialog.classList.contains('active')) hideDialog();
+		if (e.key === 'Escape') {
+			if (dialog.classList.contains('active')) hideDialog();
+			hideContextMenuListener();
+		}
 	});
+	document.addEventListener('click', hideContextMenuListener);
+	document.addEventListener('contextmenu', hideContextMenuListener);
+	document.addEventListener('mouseleave', hideContextMenuListener);
+	function hideContextMenuListener() {
+		if (contextMenu.classList.contains('active')) hideContextMenu();
+	}
 }());