Incorrect this.context.listView.selectedRows when navigating to another list using quick launch menu (ListView Command Set)

[SPJS]

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
• [ ] 💥 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: Version 129.0.6668.103 (Official Build) (64-bit)
• SPFx version: 1.20.2
• Node.js version: v18.20.4

Please note that my tenant is on Targeted release.

Describe the bug / error

When a SharePoint list is using the updated UI experience the this.context.listView.selectedRows object refers to the selected item ID in the previous list when you navigate to another list using the quick launch menu.

This example uses the hello-world Command Set SPFx: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api

If you first open List_A, select an item and click the Command One button:

This outputs the following to the console:

If you then navigate to List_B using the quick launch menu, the Command One button is visible even though no items are selected (or exist for that matter) in List_B:

There are no items in List_B to select, but the console outputs the previous selected item from List_A

If List_B does contain items and there is an item with the same ID as the selected item in List_A, this item will be listed in the console even if it is not actually selected in the list view:

Steps to reproduce

1. Create the default hello-world Command Set SPFx: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api
2. Change the Dialog.alert for “COMMAND_1” to console.log this.context.listView.list and this.context.listView.selectedRows.
3. Open List_A, select one item and click the “Command One” button. You should see the correct information in the console.
4. Navigate to List_B using the quick launch menu. You will see the Command One button visible even if you don't have any items selected.
5. Click the “Command One” button and it will show the previous list selectedRows in the console.
6. Refresh the page while in the new list view and the context will be correct.

I changed the hello-world example like this:

Expected behavior

The this.context.listView.selectedRows object should be reset when you navigate to another list.

[natalieethell]

Thank you @SPJS for reporting! We're working on a fix. In the meantime, selecting and de-selecting an item in the list you navigated to should reset those commands.

[SPJS]

Great - I have one related issue that you might want to look into also. If you navigate between lists, the _onListViewStateChanged function is called multiple times when you go to select an item. It seems the listViewStateChangedEvent is not removed when you navigate to another list - effectively adding another call to that function for every new list you navigate to.

To recreate this you can modify the hello-world example and add this console.log:

Now click between List_A and List_B a few times using the quicklaunch link and then click to select a list item - it will console.log one line for every time you changed the list:

Alexander

[natalieethell]

@SPJS Thanks! We'll take a look.

[natalieethell]

I found the source of the onListViewStateChanged bug and merged a fix in the 11/15 build! You should see these changes rolling out in a few weeks.

[SPJS]

@natalieethell Thanks for the update, I loaded the dev-version you gave me access to and it seems to fix the issue.

Best regards, Alexander

[Amey-MSFT]

Hello @SPJS, Thank You for your patience. Is the issue resolved now?

[SPJS]

Hi, Yes, it works as expected now - thanks!

Alexander