Angular - how to position a context menu in a table row with a return key

Issue

Environment: Angular, Bootstrap4. For now this step is chosen to make the table more accessible. In the near future we will make tables visible in a more WCAG way. Please focus on this question.

Each row in a table with dynamic data contains a context menu. See the picture below. Of course this is a simplified version with only 2 options.

Using the context menu the user selects an action. Normally the context menu is activated with a mouse click or right mouse click. The event data is used to position the context menu. The context menu contains in this simple case 2 items: Show and Edit. Works fine for years. I could make the menu more visible, of course.

When the context menu is in the tab order, the user could activate the menu with a 'return'. The problem is that the coordinate of the event is then anywhere on the page.

The context menu code is:

<div tabindex="-1" *ngIf="contextmenu===true">
  <app-contextmenu [x]="contextmenuX" [y]="contextmenuY" [menuitems]="showMenuOptions()"
                   (menuItemSelected)="handleMenuSelection($event)"></app-contextmenu>
</div>

How can a retrieve the coordinates (x,y) from the tab-selected context menu, so being the dots icon or table cell? That position I can use to position the context menu.

Each table rows contains this last table row code:

<td tabindex="0" class="col-1" (click)="onrightClick($event, journalEntry)" (keydown.enter)="onrightClick($event, journalEntry)"
    (contextmenu)="onrightClick($event, journalEntry)">
  <fa-icon [icon]="ellipsisV" size="1x" alt="..." aria-label="..."  [styles]="{'stroke': 'blue', 'color': 'blue'}"></fa-icon>
</td>

When a page contains a context menu, I put this at the bottom of the page:

<div tabindex="-1" *ngIf="contextmenu===true">
  <app-contextmenu [x]="contextmenuX" [y]="contextmenuY" [menuitems]="showMenuOptions()"
                   (menuItemSelected)="handleMenuSelection($event)"></app-contextmenu>
</div>

The code for the context menu is:

<div class="contextmenu" [ngStyle]="{'left.px': x, 'top.px': y}">
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let menuItem of theMenuItems">
      <span (click)="outputSelectedMenuItem( menuItem)">{{ menuItem }}</span>
    </li>
  </ul>
</div>

Solution

Place the context menu and hide it using the generic row id of data and bool. When a user will click, pass the data which row is containing and set bool to true. If bool is true than show the context menu. And after making changes set bool to false.

Answered By - Nauman Malik