Framework: Double-clicking in a grid cell selects text outside cell

[edler-san]

Go to https://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features (which runs on 8.8.6. as of writing)

Double-click in any cell while your mouse is positioned to the right or below the text. It will select text in the cell to the right of the clicked cell.

This affects only Chrome ( 76.0.3809.100 (Offizieller Build) (64-Bit)).

Firefox (68.0.2 (64-Bit)) and Safari (Version 12.1.2 (14607.3.9)) seem unaffected.

[TatuLund]

Today I managed to find one css rule that could be a potential workaround

.v-grid-cell { 
    user-select: all; 
}

That is a bit problematic to add to our framework, since it changes the behavior. I.e. then text becomes selected already by single click. But the selection for some reason works correctly and no bleeding to next cell happens. Also double click does not make it bleed anymore.

[evanzel]

Not comfortable commenting on a closed ticket, but one may try the following rule:

    .v-grid-cell-focused { 
        user-select: all; 
    }

This one avoids the text selection by single click and handles the double click nicely.

[TatuLund]

@evanzel Thanks for the advice.

[Kalomo]

The workaround breaks the drag and drop feature between two grids in chrome.

USe Chrome Tools to add the css style to the grid-cell class, drag and drop no longer working
https://demo.vaadin.com/sampler/#ui/drag-drop/grid-drag-rows-html5

[javier-godoy]

valo-draggable already applies user-select: none !important on the row (which is .v-draggable), but the workaround imposes user-select: all on the cell, thus overriding the styles inherited from the row.

A slightly variation of the workaround, considering this case is:

.v-grid-cell-focused {
    user-select: all;
}

.v-draggable .v-grid-cell-focused {
    user-select: none;
}