Position dropdown after rendering complete

frontend/app/components/context-menus/context-menu.service.ts

@@ -30,7 +30,9 @@ interface ContextMenu {
   active();
   close();
   open();
-  reposition();
+
+  target?:JQuery;
+  menuElement?:JQuery;
 }
 
 export class ContextMenuService {
@@ -59,7 +61,8 @@ export class ContextMenuService {
     this.active && this.active.close();
   }
 
-  public activate(contextMenuName, target:JQuery, locals) {
+  public activate(contextMenuName, event:JQueryEventObject, locals) {
+    let target = jQuery(event.target);
     let contextMenu = this.$injector.get(contextMenuName);
 
     // Close other context menu
@@ -69,7 +72,7 @@ export class ContextMenuService {
     contextMenu.open(target, locals).then((menuElement) => {
       contextMenu.menuElement = menuElement;
       this._active_menu = contextMenu;
-      this.reposition();
+      setTimeout(() => this.reposition(event), 50);
       (menuElement as any).trap();
       menuElement.on('click', function (e) {
         // allow inputs to be clickable
@@ -81,7 +84,7 @@ export class ContextMenuService {
     });
   }
 
-  public reposition() {
+  public reposition(event:JQueryEventObject) {
     if (!this.active) {
       return;
     }
@@ -89,7 +92,13 @@ export class ContextMenuService {
     let menuElement = this.active.menuElement;
     let target = this.active.target;
 
-    menuElement.position({ my: 'center', at: 'bottom right', of: target });
+    // Uses jquery-ui position
+    menuElement.position({
+      my: 'left top',
+      at: 'right bottom',
+      of: event,
+      collision: 'flipfit'
+    });
   }
 }
 

frontend/app/components/context-menus/has-dropdown-menu/has-dropdown-menu-directive.js

@@ -27,7 +27,63 @@
 // ++
 
 function hasDropdownMenu($rootScope, $injector, $window, FocusHelper) {
+  function getCssPositionProperties(dropdown, trigger) {
+    var hOffset = 0,
+      vOffset = 0;
+    if (dropdown.hasClass('dropdown-anchor-top')) {
+      vOffset = -dropdown.outerHeight() - trigger.outerHeight() + parseInt(trigger.css('margin-top'), 10);
+    }
+
+    // Styling logic taken from jQuery-dropdown plugin: https://github.com/plapier/jquery-dropdown
+    // (dual MIT/GPL-Licensed)
+
+    // Position the dropdown relative-to-parent or relative-to-document
+    if (dropdown.hasClass('dropdown-relative')) {
+      return {
+        left: dropdown.hasClass('dropdown-anchor-right') ?
+        trigger.position().left -
+        (dropdown.outerWidth(true) - trigger.outerWidth(true)) -
+        parseInt(trigger.css('margin-right'), 10) + hOffset :
+        trigger.position().left + parseInt(trigger.css('margin-left'), 10) + hOffset,
+        top: trigger.position().top +
+        trigger.outerHeight(true) -
+        parseInt(trigger.css('margin-top'), 10) + vOffset
+      };
+    }
+    else {
+      return {
+        left: dropdown.hasClass('dropdown-anchor-right') ?
+        trigger.offset().left - (dropdown.outerWidth() - trigger.outerWidth()) + hOffset : trigger.offset().left + hOffset,
+        top: trigger.offset().top + trigger.outerHeight() + vOffset
+      };
+    }
+  }
+
+  function getPositionPropertiesOfEvent(event) {
+    var position = {};
+
+    if (event.pageX && event.pageY) {
+      position.top = Math.max(event.pageY, 0);
+      position.left = Math.max(event.pageX, 0);
+    }
+    else {
+      var bounding = angular.element(event.target)[0].getBoundingClientRect();
+
+      position.top = Math.max(bounding.bottom, 0);
+      position.left = Math.max(bounding.left, 0);
+    }
+
+    return position;
+  }
+
+  function getCssPositionPropertiesOfEvent(event) {
+    var position = getPositionPropertiesOfEvent(event);
+
+    position.top += 'px';
+    position.left += 'px';
 
+    return position;
+  }
 
   return {
     restrict: 'A',

frontend/app/components/wp-fast-table/handlers/row/context-menu-handler.ts

@@ -40,7 +40,7 @@ export class ContextMenuHandler implements TableEventHandler {
     let element = target.closest(this.SELECTOR);
     let row = table.rowObject(element.data('workPackageId'));
 
-    this.contextMenu.activate('WorkPackageContextMenu', target, { row: row });
+    this.contextMenu.activate('WorkPackageContextMenu', evt, { row: row });
     return false;
   }
 }

frontend/app/global.js

@@ -47,6 +47,7 @@ require('jquery-ujs');
 require('angular-dragula');
 
 require('jquery-ui/ui/core.js');
+require('jquery-ui/ui/position.js');
 require('jquery-ui/ui/widgets/datepicker.js');
 require('jquery-ui/ui/widgets/dialog.js');
 require('jquery-ui/ui/widgets/autocomplete.js');