dotnet / dotnet/aspnetcore

[Validation] QuickGrid row clicks

Open
#69,130 1 comment 0 reactions 1 assignee Claimed by @irfanajaffer View on GitHub
area-blazor Validation validation-scenario
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 5h
Merged PRs (30d)
276

Description

**Scenario contact:** @dariatiurina

## Scenario

`QuickGrid` now has an `OnRowClick` callback that hands you the item for the clicked row, and rows become visibly clickable when it is set. Before this the only way to make a row act as a selection target was to put a link or button in a cell, or to attach a handler through JavaScript.

Validate that clicking anywhere in a row selects the right item, that the clickable styling appears only when a handler is supplied, and that clicking a button inside a cell does something predictable.

## Minimum build

.NET 11 RC1.

## Configurations to cover

* Blazor Web App
* [ ] Static SSR
* [x] Interactive Server
* [x] Interactive WebAssembly
* [ ] Interactive Auto
* [ ] Standalone WebAssembly
* [ ] Hybrid (MAUI)

## Also exercise

* [ ] Published output
* [ ] An existing .NET 10 app upgraded to .NET 11
* [ ] Trimming or ahead-of-time compilation
* [ ] More than one server instance, or a proxy in front
* [ ] Hot Reload
* [ ] An IDE as well as the command line
* [ ] Container
* [x] N/A

## What to build

A page with a `QuickGrid` over about 20 in-memory items and a panel beside it that shows the currently selected item. Clicking a row selects it. Use `RowClass` to mark the selected row so you can see both classes on the same element.

Give the last column a button and a checkbox, so there are interactive elements inside a clickable row. Record each control's callback separately from row callbacks and state whether event propagation is suppressed. Make the row handler asynchronous with a short delay and log the item and start/completion of each invocation, so callback delivery can be distinguished from the sample app's selection-update order.

Put a second grid with no row-click handler on the same page for comparison.

## Things to try

* Click in the middle of a cell, on the padding between cells, and near the row's left and right edges.
* Click the button and the checkbox in the last column.
* Click the same row twice quickly, then a different row while an earlier handler is still running. Compare invocation counts and supplied items, without treating the order in which the app updates its panel as a callback-order guarantee.
* Hover across both grids and compare the cursor and any hover styling.
* Tab through the grid and record whether focus reaches rows themselves or only the nested controls. Record keyboard support as an observation, not a requirement that rows must remain inaccessible.
* With touch emulation or a touch screen: tap a row, tap the nested button, and start a scroll gesture on a row.

## Expected behavior

Clicking a row invokes the handler once with that row's item. The clickable styling appears only when a handler is supplied.

### Must hold

* With a handler supplied, every data `` has `row-clickable` in its `class`; in the comparison grid no `` has it.
* When `RowClass` returns `selected` for a row, that row's `class` contains both `row-clickable` and `selected`.
* Clicking a cell's whitespace in a row invokes the handler exactly once and the panel shows that row's item.
* Clicking the button inside a row runs the button's own handler, and whatever the row handler does in that case is the same in Interactive Server and Interactive WebAssembly.

### Expected differences between configurations

* The `row-clickable` class is present whenever a handler is supplied, including before any touch. Hover or active feedback depends on the browser, theme, and input device; record what you see without requiring a touch-specific styling transition.

## Evidence to capture

* The rendered `` markup of a selected and an unselected row, with the full `class` attribute.
* A recording of hover feedback and of a row click updating the panel.
* A note, per render mode, on what happened when the button inside a row was clicked.
* Callback logs for rapid clicks, including the item supplied to each invocation, plus the observed keyboard and touch behavior.

## Documentation to use

* [ASP.NET Core Blazor QuickGrid component](https://learn.microsoft.com/aspnet/core/blazor/components/quickgrid?view=aspnetcore-11.0)

Report whether the docs say what happens when a cell contains its own button, and whether they name the CSS class added to clickable rows.

## What to report

Report results using the format described in the [validation testing manual](https://github.com/dotnet/aspnetcore/issues/68479). Include link to a repository with the test app.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.