dxc-technology / halstack-react

Library of components for building SPAs with React and Halstack Design System
https://developer.dxc.com/halstack/
Apache License 2.0
15 stars 14 forks source link

Checkbox not working properly with Resultset Table #1752

Closed djdannycastillo closed 9 months ago

djdannycastillo commented 10 months ago

Describe the bug When you add a DxcCheckbox component for each item to rows array, checkboxes not being checked separately, instead of, checkboxes are being checked based on index in the pagination. I can checked each checkbox separately if I use checked prop but every time I update the state of the checkboxes, the table is re-rendered and it returns to the first page.

To Reproduce

  1. Create a simple component using the example in the documentation https://developer.dxc.com/halstack/10/components/resultset-table/

  2. Add a DxcCheckbox for each element like this:

const rows = [ [ { displayValue: <DxcCheckbox /> }, { displayValue: "001"}, { displayValue: "Cris"}, { displayValue: "Paris"} ] ]

  1. Add more than 5 elements in the rows array, in order to display pagination

  2. Check the first DxcCheckbox in the first page and navigate to the others pages, you will see all DxcCheckbox in the first position will be checked

Expected behaviour We want to check each element into the array separately to handle the checkboxes are been checked

Screenshots checkboxes-resultset-table

GomezIvann commented 10 months ago

Hi @djdannycastillo!

First of all, thank you for detailing the bug so much - it helps a lot!

About the issue, I've reviewed it and you are right. Checking the first row checks the rest of the first rows when there's pagination. We need to address this.

Thanks again for the feedback!