SPFX ListViewCommandSet - this.context.listView.selectedRows is wrong in grouped lists

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version: "newest" versions of chrome and edge
• SPFx version: 1.15.2
• Node.js version 14.17.0
• etc

Describe the bug / error

When having a grouped list view the array "this.context.listView.selectedRows" is containing sometimes the wrong rows. The first group seems to work, but the 2nd group looks wrong. In the array is always the item with the same index of the "selected group" but from the first group. In the linked image the 2nd item from the 3rd group is selected. But in selectedRows is the 2nd item from the first group. This behavior is a problem when one want to check something in a method other then the onExecute (where you can use the event parameter to have a workaround).

Steps to reproduce

1. Create the "default" spfx ListViewCommandSet extension
2. Create a list in SharePoint and add a view which is grouped by one or two rows
3. Change the code of the extension a bit to return the title (or any other column) of the selected item in onExecute or in _onListViewStateChanged. For example like this:

public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    let valueByEvent;
    let valueByContext;
    switch (event.itemId) {
      case 'COMMAND_1':
        valueByEvent = event.selectedRows[0].getValueByName("Title");
        valueByContext = this.context.listView.selectedRows[0].getValueByName("Title");
        Dialog.alert(`ByEvent: ${valueByEvent}, ByContext: ${valueByContext}`).catch(() => {
          /* handle error */
        });
        break;
      case 'COMMAND_2':
        Dialog.alert(`${this.properties.sampleTextTwo}`).catch(() => {
          /* handle error */
        });
        break;
      default:
        throw new Error('Unknown command');
    }
  }

4. Run the code (gulp serve) on the list with the grouped view
5. Select an item in another group then the first one
6. the output should look like this

Expected behavior

Expected would be that this.context.listView.selectedRows contains the rows which are selected (the array should contain the same values like the parameter of onExecute (event: IListViewCommandSetExecuteEventParameters, event.selectedRows).

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

@diabhoil - thank you for reporting this issue! The fix has been done and will be rolled out in the next couple of weeks.

@AJIXuMuK did the fix roll out?

@flaviuc - yes, it should be in PROD now. Are you still seeing the issue?

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within the next 7 days of this comment. Please see our wiki for more information: Issue List Labels: Needs Author Feedback & Issue List: No response from the original issue author

Closing issue due to no response from the original author. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: No response from the original issue author