Open adf-document-list's context menu on click instead of right click

[vikash_patel]

Hello Team,

I am using  ADF 6.10 (Alfresco Content App), Alfresco Content Services 23.2.
I have found that Alfresco file list component (files.component.html), that have adf-document-list component which opens context menu on right click,

<adf-document-list
          #documentList
          acaDocumentList
          acaContextActions
          [selectionMode]="'multiple'"
          [multiselect]="true"
          [currentFolderId]="node?.id"
          [loading]="true"
          [showHeader]="showHeader"
          [node]="nodeResult"
          [allowDropFiles]="true"
          [navigate]="false"
          [sorting]="['name', 'asc']"
          [imageResolver]="imageResolver"
          [headerFilters]="true"
          [filterValue]="queryParams"
          [isResizingEnabled]="true"
          [blurOnResize]="false"
          (node-dblclick)="handleNodeClick($event)"
          (name-click)="handleNodeClick($event)"
          (filterSelection)="onFilterSelected($event)"
          (error)="onError()"
        >

It's using directive acaContextActions which is having HostListener which opens context menu on right click 

 @HostListener('contextmenu', ['$event'])
  onContextMenuEvent(event: MouseEvent) {
    if (event) {
      event.preventDefault();

      if (this.enabled) {
        const target = this.getTarget(event);
        if (target) {
          this.execute(event, target);
        }
      }
    }
  }

 
I tried by putting click event HostListener - @HostListener('click', ['$event']), but it is not working properly.
It opens context menu but it blocks the multiselect feature of file / folder selection because it's listen click event and prevents the checkbox events.



It also sometimes opens contextmenu but it takes the wrong row / node reference and opens context menu of other nodes.

I also tried with mousedown event as well but none of them are working properly.

  @HostListener('click', ['$event'])
  onContextMenuClickEvent(event: MouseEvent) {
    if (event.which !== 3) {
      event.preventDefault();
      if (this.enabled) {
        const target = this.getTargetFromEvent(event);
        if (target) {
          if (this.isEmptyTable(target)) {
            return null;
          }
          this.execute$.next(event);
        }
      }
    }
  }

I wanted to implement the same behaviour of conext menu as we got the menu items on right click by doing a click.
Please help / suggest the customization or changes required to achieve this solution.

Thanks,
Vikash