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

[jennie258fitz]

---

@vikash_patelAarpMembership wrote:

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

---

To achieve the desired behavior of opening the context menu on a left-click instead of a right-click while maintaining the multiselect functionality, you can modify the event handling in your ADF component. Here's a step-by-step approach:

Step 1: Update the HostListener
You want to handle both the left-click for the context menu and also ensure that checkbox selections are working correctly.

Handle Click Event for Context Menu:

Instead of using the @HostListener('click', ['$event']) to open the context menu directly, you'll want to check if the click is on a valid item and also check if it interferes with selection behavior.

Here’s a way to do this:

@HostListener('click', ['$event'])
onContextMenuClickEvent(event: MouseEvent) {
const target = this.getTargetFromEvent(event);

// Check if the target is a valid node item
if (target && this.enabled) {
event.preventDefault();

// Open the context menu if it is not a checkbox click
if (!this.isCheckboxClick(event)) {
this.execute$.next(event);
}
}
}

private isCheckboxClick(event: MouseEvent): boolean {
// Check if the click is on a checkbox
return event.target instanceof HTMLInputElement && event.target.type === 'checkbox';
}

Step 2: Adjust the Context Menu Logic
Modify the context menu logic:

When opening the context menu, ensure that it references the correct node. Make sure your execute function or observable is correctly identifying the target node based on the event.

If you're using a method to determine which node to use for the context menu, ensure that it accurately captures the clicked node's information.

Step 3: Ensure Multiselect Works
Handle Multiselect:

You want to maintain the ability to select multiple items. Ensure that your click handler allows checkbox clicks to be processed normally
private getTargetFromEvent(event: MouseEvent): any {
// Implement your logic to find the target node from the event
}

Step 4: Integrate the Logic into Your Component
Finally, integrate the modified logic into your adf-document-list component.

Step 5: Test Your Implementation
Test clicking on document items to ensure that the context menu opens correctly without interfering with checkbox selections.
Ensure that multiselect still works as intended.

Best regards,
JennieF