Grid not updating to display its bound data source Declined - Not Valid

I have created an application which uses a number of grids on a page. When selection a row in the first Grid (Teams) the contents of the second Grid (Team Members) is updated. I have found that it is possible for a situation to be created consistently where the second Grid does not update to display the contents of its data source. I have experimented with “StateHasChanged()” and other ways of trying to force the Grid to update, but it does not appear to be a rendering issue, but one where the Grid just has not “noticed” that its data source has changed, and therefore the data held in the Grid is stale.

In my real-word application the datasets are drawn from SQL lookups. The example provided to show the issue is using a simplified method so the example can be a one page app.

Once the page is loaded the way to create the issue is…

Click on each of the rows in the “Teams Names” Grid from Team 1 through to Team 4 and then back to Team 1.

So far it will have behaved as expected. Each time a Team Name row is selected, the Team Members Grid will have updated with that Teams list of Members.

Now, click on Team 3, Team4 and Team 1 in that order. The issue can be seen in that the Team Members Grid will not have updated and so although the header is showing that it is the members of Team 1 being displayed that contents of the Grid has remained as Team 4.

The fact that Team 3 has no records is key to creating this issue. Is this a bug or should a data source with no records be initialised in a particular way?