[ANGULAR] Selection changes when right-clicking on a task before executing a custom taskMenu action

[vincenzo.menzella]

Hi,

I think I might have found a bug related to task selection when using the taskMenu with multiple selected tasks.

Behavior observed

1. Select multiple tasks.

2. Right-click on one of the selected tasks (inside the task bar rectangle) to open the taskMenu.

3. Click on a custom menu item that opens a confirmation modal.

4. After confirming the modal, the selection changes:
   Only the task that was right-clicked remains selected, while all the other previously selected tasks are deselected.

Expected behavior

The original multi-selection should remain intact after confirming the modal, since the user intentionally selected multiple tasks before opening the menu.

Important detail

• If I right-click on the left grid or on the empty space of the Gantt row (not on the task bar), the selection does not change after confirmation.

• The issue happens only when the right-click occurs directly on the task bar element.

Reproduction

I reproduced the issue in this demo (link), adding the code below to register a custom taskMenu item and show a confirmation modal.

JS

let selectedRecords = [];

gantt.features.taskMenu.items['customItem'] = {
    text: 'Custom item',
    icon: 'b-icon-cog',
    weight: 10,
    onItem: ({ taskRecord }) => {
        console.warn('Custom item clicked:', selectedRecords);
        showConfirmDialog();
    },
}

gantt.listeners = {
    selectionChange: ({ selection }) => {
        selectedRecords = selection;
        console.log('selectionChange', selection);
    }
};

function showConfirmDialog() {
    const dialogMask = document.createElement('div');
    dialogMask.className = 'dialog-mask';

const dialog = document.createElement('div');
dialog.className = 'dialog';
dialogMask.appendChild(dialog);

const title = document.createElement('span');
title.innerText = 'Are you sure?';
dialog.appendChild(title);

const okButton = document.createElement('button');
okButton.innerText = 'Ok';
okButton.onclick = () => {
    console.log('Dialog ok', selectedRecords);
    dialogMask.remove();
}
dialog.appendChild(okButton);

document.getElementById('container').appendChild(dialogMask);
}

CSS

.dialog-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000066;
    z-index: 9999;
}

.dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    background: white;
    padding: 10px;
    transform: translate(-50%, -50%);
}

Question

Is this expected behavior?
Thanks!

[marcio]

Hey vincenzo.menzella,

Thanks for reaching out.

If you select an option in the task menu, it'll be applied to that specific task, so that's why it keeps only one task selected.

For example, if you select the "Split" task, it'll split only one task, so it makes sense to highlight only that specific task. Right‑clicking that task updates selection (the Gantt uses the event selection handling for task clicks). Easiest workaround is to capture the current multi‑selection on right‑mouse down and restore it after the modal confirmation.

Example:

let prevSelection = [];

gantt.on('taskMouseDown', ({ event }) => {
    if (event.button === 2) prevSelection = gantt.selectedEvents.slice();
});

gantt.features.taskMenu.items.customItem = {
    text: 'Custom item',
    onItem: () => {
        showConfirmDialog(() => { // call this on OK
            if (prevSelection?.length) gantt.selectEvents(prevSelection);
            // then perform your action using prevSelection or gantt.selectedEvents
        });
    }
};

Documentation reference:
taskMouseDown
taskMenuBeforeShow

[vincenzo.menzella]

Thanks for the explanation!

I understand why the action from the taskMenu is applied to the specific task that was right-clicked.
However, I still have a question regarding the different behavior depending on where the right-click happens.

If I right-click directly on the task bar, the selection is changed to the single task I clicked on.
But if I right-click on the grid or on empty space in the Gantt row, the multi-selection is preserved.

Why is the behavior different in these cases?

From a user-interaction point of view, I would expect right-clicking anywhere on a selected row/task to behave the same way. Is there a technical reason why right-clicking on the task bar triggers a selection change, while right-clicking in the grid or empty space does not?

Additionally, I have a custom logic for the taskMenu:

• if multiple items are selected, I show some specific menu items.

• if only one item is selected, I show a different set of menu items.

Finally, I noticed that the delete action behaves differently: when multiple tasks are selected and I click “Delete”, all the selected tasks are removed, and this issue does not occur.
So the inconsistent behavior seems to affect only custom menu actions, not built-in ones.

Thanks again!

[marcio]

Hey,

Right, this is intentional and comes from how Gantt handles clicks on task bars vs grid cells:

• Right‑clicking a task bar runs the task's mouse handlers which update selection to the clicked task (so task‑specific actions operate on that single task). See the taskMouseDown event.
• Right‑clicking the grid/empty schedule area does not trigger that task selection change, so your multi‑selection stays intact.

Built‑in actions (like Delete) are implemented to operate on the widget's current selection, so they remove all selected tasks. Custom onItem handlers receive the clicked taskRecord (and the selection may already have changed), so you see the discrepancy.

Workarounds:

• Capture the current multi‑selection on right mouse down and use/restore it after your confirmation dialog.
• Or use the TaskMenu.processItems / taskMenuBeforeShow to change which items are shown based on a previously captured selection.