Vaadin-grid: Click Listener for middle or right mouse buttons

[F43nd1r]

Right now the click listener introduced in vaadin/vaadin-grid-flow#359 (and released in 2.1.0.alpha1) only works for left clicks. It would be nice to support the other mouse buttons as well.

[gilberto-torrezan]

Confirmed. The API has support for multiple buttons, but the event never reaches the server. For example, in this code (based on the GridView demo), the cases 1 and 2 are never executed:

Div message = new Div();
Grid<Person> grid = new Grid<>();
grid.setItems(getItems());
grid.addColumn(Person::getName).setHeader("Name");
grid.addColumn(Person::getAge).setHeader("Age");

grid.setSelectionMode(SelectionMode.NONE);

grid.addItemClickListener(event -> {
            switch (event.getButton()) {
            case 0:
                message.setText("Clicked Item: " + event.getItem());
                break;
            case 1:  // never executed
                message.setText("Middle-Clicked Item: " + event.getItem());
                break;
            case 2: // never executed
                message.setText("Right-Clicked Item: " + event.getItem());
                break;
            }
        });

Apparently the Grid connector needs to prevent the default click behavior on the browser in order for those events to be triggered.

[denis-anisimov]

I'm not so sure about default behavior.
It needs to be prevented : true.
But to be able to prevent the behavior we should be able to get the event.
If we receive the event then it should be send to the server. And as a side effect there will be e.g. a context menu.
But since we don't receive any events at all the client side listener is never called.
So it's more complicated than just simple prevention.

[pleku]

For the case when the item click listener is added on the server side, the defaults should be:

• the event bubbling / propagated is stopped
• the default (browser behavior) is prevented

Right and middle clicks should obviously work. There is some API improvement work happening for this currently on the web component side (https://github.com/vaadin/vaadin-grid/issues/1318 ?)

[pleku]

Just for reference, we have https://github.com/vaadin/flow/issues/1363 for making it possible to give control for the developer to decide what to do with bubbling and preventing default.

[sebdavid]

Hi,
Do you have a plan about the fix and release of this issue?
Or do you have some kind of workaround?

My use case would be that by right-clicking an item of the grid, it would be automatically selected and the contextmenu opened.

[sebdavid]

Hi,
Actually, it seems that the right-clicking issue is a general Vaadin issue, I mean it it not bound to vaadin-grid-flow.
The following code, directly applied on a VerticalLayout, does trigger an event only with a left-click :

addListener(ClickEvent.class, e -> {
    System.out.println("clicking :"+ e.getButton());
});

[sebdavid]

Any information about this topic please?

[pekam]

Hi @sebdavid! Unfortunately this issue is not prioritized and we don't currently have a plan for fixing it.

My use case would be that by right-clicking an item of the grid, it would be automatically selected and the contextmenu opened.

In Vaadin 14.1, we will introduce a new method in GridContextMenu::setDynamicContentHandler vaadin/vaadin-grid-flow#748. It is meant for changing the contents of the ContextMenu based on the targeted item, but you could also use it to select that item.

[sebdavid]

Thank you for the answer.
This sounds so strange to me, that something is working in a given version (8), and not anymore in a newer version (10?, 13, 14), and there is no plan for fixing the issue, whereas it seems to be a basic functionnality (the right-click detection).

[pekam]

I understand, and can imagine that this might be a big deal especially if you're migrating a V8 app which has been using this feature. Based on this discussion and the amount of up-votes, we have moved the issue pretty high in our bug backlog, but we still have a lot of priority issues before this one. Hopefully we have more capacity for maintenance in the near future.

[sebdavid]

Ok, thank you for that.
Any chance that the fix will be ported in Vaadin 13.x ?

[pekam]

Unfortunately no, because the support for Vaadin 13 has ended already. You should update to Vaadin 14 which has long-term support.

[pekam]

Notes for the fix:
The code in gridConnector.js fires the event only when it's preceded by a cell-activate event. The reason to have it is that it takes care of not firing the event when clicking on focusable elements in grid cells (e.g. checkbox). The problem is that cell-activate fires only with a left-click. So to support right-clicks, we can't use this cell-activate event anymore.

So, to support right-click:

• Fire the events also on client-side contextmenu event (right-click doesn't trigger a click) and use preventDefault()
• Remove the check for preceding cell-activate event
• Get the target item with grid.getEventContext() instead
• Find another way for not firing the event when clicking focusable elements (there are tests for this already), eg. using grid._isFocusable like the active-item event.

_Update(11/6): added note that contextmenu event is needed for right-click_