fix overflow menu "jumping" the page

Author: cal-smith

src/dialog/overflow-menu/overflow-menu-pane.component.ts

@@ -36,18 +36,15 @@ export class OverflowMenuPane extends Dialog implements AfterViewInit {
 
 	onDialogInit() {
 		/**
-		 *  -20 shifts the menu up to compensate for the
-		 *  extra offset generated by the wrapper component.
-		 *
 		 *  60 shifts the menu right to align the arrow.
 		 * (position service trys it's best to center everything,
 		 * so we need to add some compensation)
 		 */
 		this.addGap["bottom"] = pos => {
 			if (this.dialogConfig.flip) {
-				return position.addOffset(pos, -20, -60);
+				return position.addOffset(pos, 0, -60);
 			}
-			return position.addOffset(pos, -20, 60);
+			return position.addOffset(pos, 0, 60);
 		};
 
 		if (!this.dialogConfig.menuLabel) {
@@ -103,15 +100,19 @@ export class OverflowMenuPane extends Dialog implements AfterViewInit {
 	}
 
 	ngAfterViewInit() {
-		const focusElementList = this.listItems();
-		focusElementList.forEach(button => {
-			// Allows user to set tabindex to 0.
-			if (button.getAttribute("tabindex") === null) {
-				button.tabIndex = -1;
-			}
+		// wait for the menu to exist in the DOM before setting focus
+		// TODO: work on a more elegant solution (afterDialogInit hook maybe?)
+		setTimeout(() => {
+			const focusElementList = this.listItems();
+			focusElementList.forEach(button => {
+				// Allows user to set tabindex to 0.
+				if (button.getAttribute("tabindex") === null) {
+					button.tabIndex = -1;
+				}
+			});
+			focusElementList[0].tabIndex = 0;
+			focusElementList[0].focus();
 		});
-		focusElementList[0].tabIndex = 0;
-		focusElementList[0].focus();
 		super.ngAfterViewInit();
 	}