Weird behavior with SelectionGrid "inside" SelectionGrid

I have a Combobox replacement consisting of a CompositeField with a TextField and a Popover panel with a SelectionGrid.

When I use this in a form, it works great.
When I use it in an editable SelectionGrid, I get weird behavior and possibly an exception.

When I click on row X in the SelectionGrid in the Popover panel, it also tries to set the selection to row X in the outer SelectionGrid. That causes the selection to jump around or throw an IndexOutOfBoundsException.

Switching both back to regular Grid solves the issue (but then I get back the other issues that SelectionGrid solved for me)

I assume this is an issue with SelectionGrid, so I’ve registered a bug, but while waiting for a fix, can anyone think of a possible workaround?

The only thing I can think of just now is to use regular Grid in the Combobox replacement, and only use SelectionGrid for the main, editable Grid.

I’ve now tried using SelectionGrid for the outer grid, and regular Grid in my Combobox replacement in the editor → Same error.

Looks like the outer SelectionGrid listens on any event that happens inside it?

Trying to wrap my head around the code.

Shouldn’t this onClick handler have an e.stopPropagation()?:

Did a small experiment in the browser DevTools:
const n = customElements.get("vaadin-selection-grid");const i=n.prototype._onClick;n.prototype._onClick=function(e){i.bind(this)(e),this._selectionGridSelectRow(e);e.stopPropagation()}

That seems to solve it, though I have no idea if I’m maybe breaking something else

Would this be a sensible way to apply this hack until it gets fixed?

    public MainLayout() {

        // fix bug in SelectionGrid
        
        UI ui = UI.getCurrent();
        boolean loaded = ui.getElement().getProperty("selection-grid-fix-applied", false);
        if(!loaded) {
            ui.getPage().executeJs("const n = customElements.get(\"vaadin-selection-grid\");const i=n.prototype._onClick;n.prototype._onClick=function(e){i.bind(this)(e),this._selectionGridSelectRow(e);e.stopPropagation()}");
            ui.getElement().setProperty("selection-grid-fix-applied", true);
        }

Sigh, wasn’t that easy… By calling stopPropagation several other things broke;

  • Context menu no longer closes on click outside
  • In the variant of my Combobox replacement, where I support multiselect, it is no longer possible to untick a selection; It gets instantly reselected

As soon as I commented out my hack, these two started to work as expected again