How to improve usability when user drag-selects an input in QuickGrid ColumnOptions

[pftcpq]

The issue I am facing is when a user attempts to drag-select text in an input, but their mouse movement continues beyond the end of the input and the mouseup event occurs outside of the column options div. The column options is hidden and they expect it to stay open.

Should the column options close only when a mousedown event occurs outside of the column options?

Can I capture and suppress the mouseup event?

<ColumnOptions>
    <!-- demonstrate column options closing when user attempts to select all with imprecise end point of the drag-select  -->
    <input type="text" value="12345"/>
</ColumnOptions>

[jsabutis]

It's the click listener rather than mouseup, and there's no way to suppress it from Blazor markup right now.

QuickGrid puts two close handlers on document.body in QuickGrid.razor.js:

document.body.addEventListener('click', bodyClickHandler);
document.body.addEventListener('mousedown', bodyClickHandler); // Otherwise it seems strange that it doesn't go away until you release the mouse button

bodyClickHandler closes the popup whenever event.composedPath() doesn't include .col-options (src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.js, lines 3 to 8, registered on lines 16 and 17). The mousedown half isn't your problem, since the press starts inside the input and the path includes the popup. The trouble is the click that follows. When the mouseup lands outside, the browser fires click on the nearest common ancestor of the press and release, which is outside .col-options, so the path check fails and the grid dispatches closecolumnoptions. I reproduced this in Chromium and the click target ends up being body.

Nothing bubbles out of your <ColumnOptions> content in that sequence, which is why @onclick:stopPropagation does nothing. What does work is a capture-phase guard on document, since that runs before the body listener:

let pressedInside = false;
const inside = t => t instanceof Element && t.closest('.col-options');

document.addEventListener('mousedown', e => {
    pressedInside = !!inside(e.target);
}, true);

document.addEventListener('click', e => {
    const suppress = pressedInside && e.detail > 0 && !inside(e.target);
    pressedInside = false;
    if (suppress) {
        e.stopPropagation();
    }
}, true);

Two details matter there. Reset pressedInside on every click, not just the suppressed ones, otherwise a later keyboard activation outside the popup gets swallowed (I hit exactly that with an earlier version). And e.detail > 0 keeps synthesised clicks out of it. The trade-off is that the suppressed click is cancelled page-wide, so if the drag happens to release on another button, that button won't fire.

To your first question: yes, closing only on a mousedown outside is the right shape for a framework fix, and it belongs in that same handler, skipping the click close when the preceding mousedown was inside the popup. I couldn't find an existing issue for it, so it's worth filing if you want it upstream.