Vaadin Grid middle mouse click

Question

I'm trying to emulate normal browser behaviour in my vaadin grid, which includes middle mouse click to open in a new tab:

addItemClickListener(e -> {
            boolean newTab = e.getMouseEventDetails().getButton() == MouseEventDetails.MouseButton.MIDDLE || e.getMouseEventDetails().isCtrlKey();
            //open in window or new tab
        }); 

However, the middle mouse button is not registered by vaadin. How could I get this to work?

Answer 1

That feature was included in vaadin-grid (which goes into Vaadin 10) and will not work in Vaadin 8.

For Vaadin 8, you can either intercept the event with some client-side extension, or use a ComponentRenderer for adding a Panel to each component (which works, but is not ideal because it degrades performance):

grid.addColumn(item->{
    Panel p = new Panel(item.getName());
    p.setStyleName(ValoTheme.PANEL_BORDERLESS);
    p.addClickListener(ev->{
        System.out.println(ev.getButtonName());             
    });
    return p;
}).setRenderer(new ComponentRenderer());

A client-side extension, on the other hand, allows listening to javascript events (such as MouseEvent) and triggering a server event in response. Creating a extension is quite a complex topic (since it uses a part of the API that is normally hidden from the developer) but it allows direct access to rendered DOM, which is not possible otherwise.

The following resources from the documentation may give you a starting point: Creating a component extension (which describes a simple extension with Java code only) and Integrating JavaScript Components and Extension (which explains how to add native JavaScript code to your extension).