Right click on column/row header present browser menu

Tags: #<Tag:0x00007f8b18c1bf60>

Hello team!

In my ReactJs app, I have a HOT instance on screen. I’ve added callbacks to the Context Menu items “Add row before/after” in the table settings, like the following:

...
contextMenu: {
    items: {
        row_above: {
            callback() {
                const rowIndex = this.getSelectedLast()[0];
                interactor.insertRowAtIndex(rowIndex);
            },
        },
        ...,
    },
},

The issue is that the first time I right click on a row header, I get the browser’s default right click menu:


The second time I right clik on the same row header, which is now selected I get the expected Context Menu:
The issue I think it's related to the fact, that I've registered the hook `afterSelectionEnd`, which interferes with the menu. ``` componentDidMount() { const { hotInstance } = this.hotTableComponent.current; Handsontable.hooks.add('afterSelectionEnd', this.afterSelectionEndCallback, hotInstance); }

afterSelectionEndCallback(row, column, row2, column2) {
const { interactor } = this.state;
interactor.cellsSelectionEnded(new MatrixCoordinates(row, column), new MatrixCoordinates(row2, column2));
}


Is there a way to avoid this issue?
I want to keep being informed about the selections, but I also don't want to interfere with the Context Menu.

Thank you for your help

Hey @ccrnn

can you share the demo via StackBlitz? I couldn’t reproduce the issue on our official context menu demo https://handsontable.com/docs/6.2.2/demo-context-menu.html

Hello Aleksandra,
I am sorry for having bothered you, but now after a day has passed and more experimentation, I understood the reason of this weird behaviour was due to the fact that in the body of afterSelectionEnd's callback I was refreshing the state and therefore the table.

As soon as I stopped doing so, it worked as intended.

Thanks for support

So that was the cause. Thanks for the update :slight_smile:
We can close the issue.