search

aws / aws-northstar

NorthStar is an open source design system with reusable React components for rapidly prototyping intuitive, meaningful and accessible user experience. It simplifies your work and ensures consistent, predictable user experience at scale for your customers. With NorthStar, you can focus on innovation and do more with less.
https://aws.github.io/aws-northstar
Apache License 2.0
207 stars 37 forks source link

Updating selectedItems in Table component does not update #1044

Open adriantadros opened 2 months ago

adriantadros commented 2 months ago

Describe the bug I am using the aws-northstar Table component. I am trying to update the selected items in the table based on some state that is being controlled outside of the table component. When I update the selected state, I can see it is updated, however the table component ignores it and does not update the selected checkbox items in the table.

Note: if I swap the aws-northstar Table component for the @cloudscape-design/components Table component, it works fine.

Versions @aws-northstar/ui v1.1.13

To Reproduce CodeSandbox link to reproduce the problem

Steps to reproduce the behavior

See CodeSandbox example.

Steps to reproduce:

  1. Click on checkbox items inside the table. The "selectedItems" state updates successfully.
  2. Click on the test button.

Expected behaviour Clicking on test button should override the selectedItems state and select the 3rd component in the table.

Actual behaviour The React state for "selectedItems" is updated successfully, however the Table component ignores it and keeps the current selection.

Additional context Using the @cloudscape-design/components Table works as expected. Swap the "Table" component in the imports in the CodeSandbox to see the difference in behavior.

jessieweiyi commented 1 month ago

Hi @adriantadros Thanks for reporting the bug.

Northstar's V2 Table component leverages Cloudscape's Collection hooks on handling the selectedItems updates. The input selectedItems is passed to the defaultSelectedItems of the hooks params: Items selected on the initial render. The items are matched by trackBy if defined and by reference otherwise.

It will not updated with the props change after the initial rendering.

Sorry for the confusion. We will update the docs to reflect that.