Fix focusing on first context menu item

Ensure menu positioning is complete. Make focus take place after next
repaint.

Author: myabc

frontend/src/app/shared/components/op-context-menu/op-context-menu.service.ts

@@ -21,6 +21,7 @@ export class OPContextMenuService {
 
   // Allow temporarily disabling the close handler
   private isOpening = false;
+  private openSeq = 0;
 
   constructor(
     readonly FocusHelper:FocusHelperService,
@@ -83,20 +84,33 @@ export class OPContextMenuService {
    */
   public show(menu:OpContextMenuHandler, event:Event, component:ComponentType<unknown> = OPContextMenuComponent):void {
     this.close();
+    this.isOpening = true;
+
+    // eslint-disable-next-line no-plusplus
+    const seq = ++this.openSeq;
 
     // Create a portal for the given component class and render it
-    this.isOpening = true;
     const portal = new ComponentPortal(component, null, this.injectorFor(menu.locals));
     this.bodyPortalHost.attach(portal);
     this.portalHostElement.style.display = 'block';
     this.active = menu;
 
-    setTimeout(() => {
-      this.reposition(event);
-      // Focus on the first element
-      this.active?.onOpen(this.activeMenu);
-      this.isOpening = false;
-    });
+    void this.reposition(event)
+      .then(() => {
+        // Defer onOpen to the next frame to ensure DOM/styles are applied
+        if (this.active && this.openSeq === seq) {
+          requestAnimationFrame(() => {
+            if (this.active && this.openSeq === seq) {
+              this.active.onOpen(this.activeMenu);
+            }
+          });
+        }
+      })
+      .finally(() => {
+        if (this.openSeq === seq) {
+          this.isOpening = false;
+        }
+      });
   }
 
   public isActive(menu:OpContextMenuHandler):boolean {
@@ -118,12 +132,12 @@ export class OPContextMenuService {
     this.active = null;
   }
 
-  public reposition(event:Event):void {
+  public reposition(event:Event):Promise<void> {
     if (!this.active) {
-      return;
+      return Promise.resolve();
     }
 
-    this.active.computePosition(this.activeMenu, event)
+    return this.active.computePosition(this.activeMenu, event)
       .then(({ x, y }) => {
         Object.assign(this.activeMenu.style, {
           left: `${x}px`,