I was playing around with multi-selection of the rows in DetailsList grid and noticed that selection is not as intuitive as I thought it would be. When the user clicks a row's checkbox, it will toggle that row's selection state as expected. But when you do things like shift select to select or deselect multiple options, then it seems fairly inconsistent.
For example:
To start, I selected items 3 and 2 in that order:
I then try to shift select by clicking item 0.
Expected: items 0 to 3 are selected. Basically, selection state should retain what already was selected.
Actual: only items 0 to 2 are selected with item 3 deselected:
We also noticed that selection behavior when (de)selecting items by clicking on the checkbox differ from clicking on the row itself.
For example:
To start, I have all five items in view here selected:
I want to deselect item 0. Clicking on the checkbox does the desired behavior:
But clicking on the row for item 0 itself (ie: somewhere in middle somewhere away from the row's checkbox) has different results:
Expected: same behavior as the image above (deselcting item 0 by clicking on the row's checkbox) and item 0 should be toggled off while rest still are selected.
Actual: Item 0 is selected but rest aren't.
Here's a codepen from one of the fabric developers that uses DetailsList (and only adds a few callback features to print to console, nothing more) that one can play with DetailsList in. The issues reproduce in this codepen as well. https://codepen.io/kevintcoughlin/pen/wOxGjO?editors=1010
Any help would be greatly appreciated. Thanks!
I was playing around with multi-selection of the rows in DetailsList grid and noticed that selection is not as intuitive as I thought it would be. When the user clicks a row's checkbox, it will toggle that row's selection state as expected. But when you do things like shift select to select or deselect multiple options, then it seems fairly inconsistent.
For example:
To start, I selected items 3 and 2 in that order:
I then try to shift select by clicking item 0.
Expected: items 0 to 3 are selected. Basically, selection state should retain what already was selected.
Actual: only items 0 to 2 are selected with item 3 deselected:
We also noticed that selection behavior when (de)selecting items by clicking on the checkbox differ from clicking on the row itself.
For example:
To start, I have all five items in view here selected:
I want to deselect item 0. Clicking on the checkbox does the desired behavior:
But clicking on the row for item 0 itself (ie: somewhere in middle somewhere away from the row's checkbox) has different results:
Expected: same behavior as the image above (deselcting item 0 by clicking on the row's checkbox) and item 0 should be toggled off while rest still are selected.
Actual: Item 0 is selected but rest aren't.
Here's a codepen from one of the fabric developers that uses DetailsList (and only adds a few callback features to print to console, nothing more) that one can play with DetailsList in. The issues reproduce in this codepen as well. https://codepen.io/kevintcoughlin/pen/wOxGjO?editors=1010
Any help would be greatly appreciated. Thanks!