ResultsetTable returns to the first page when re-rendered.

[jsuarezgonz]

Describe the bug
When the resultsetTable is re-rendered it always returns to the first page.
If we have inside the resultsetTable one component that changes its state, independently of the page in which it is when the state changes the resultsetTable returns to the first page.

To Reproduce

1. Create a resultsetTable with several pages and with radio buttons in one of its columns.
2. Move to the last page.
3. Click on one radio button.
4. ResultsetTable returns to the first page

Expected behaviour
ResultsetTable should stay on the page it was on.

[github-actions]

Thank you for opening an issue! 🚀

Our team will review it as soon as possible. In the meantime, please make sure that you've provided all the necessary details to help us understand and address the issue effectively.

Feel free to contribute and participate in discussions!

[Mil4n0r]

To give some context, the specific case where this occurs is when we are handling the actions in a way that the rows value is modified (for example, when storing checkbox states). This is caused by the useEffect that is present in the ResultsetTable, which currently has the following:

useEffect(() => {
    if (!hidePaginator) {
      rows.length > 0 ? changePage(1) : changePage(0);
    }
  }, [rows]);

In order to replicate the unwanted behavior, I have done this simple example:

  const [checkboxStates, setCheckboxStates] = useState(Array(N).fill(false));

  const onChange = (index) => {
    const newCheckboxStates = [...checkboxStates];
    newCheckboxStates[index] = !newCheckboxStates[index];
    setCheckboxStates(newCheckboxStates);
  };

  const columns = [
    { displayValue: "Checked" },
    { displayValue: "Id" },
    { displayValue: "Name" },
    { displayValue: "City" },
  ];
  const rows = [
    [
      { displayValue: <DxcCheckbox checked={checkboxStates[0]} onChange={() => onChange(0)} /> },
      { displayValue: "001" },
      { displayValue: "Peter" },
      { displayValue: "Miami" },
    ],
    [
      { displayValue: <DxcCheckbox checked={checkboxStates[1]} onChange={() => onChange(1)} /> },
      { displayValue: "002" },
      { displayValue: "Louis" },
      { displayValue: "London" },
    ]
  // ...
  ];
  return (
    <ExampleContainer>
      <Title title="Problem test" theme="light" level={4} />
      <DxcResultsetTable columns={columns} rows={rows} />
    </ExampleContainer>
  );

I think it would be appropiate to adjust the logic, in my opinion the best approach would be to check the previous length of rows and compare to the current one. Depending on whether the size remains equal or have changed, we can adjust the page. The logic that I have thought is something like this:

if current_rows_length == previous_rows_length:
    // Do nothing
else if current_rows_length > previous_rows_length:
    // Move to the last page (according to the new size)
    last_page = calculate_last_page(current_rows_length)
    current_page = last_page
else:
    // Check if the current page is now empty
    if current_page * page_size >= current_rows_length:
        // Go back to the previous page
        current_page = max(0, current_page - 1)
    else
        // Do nothing

For the specified example, this logic would remain the table as it is due to not changing the size, which is the expected behavior, but it also would handle cases where rows are removed or added in a better way under my POV

[AlanPadi95]

Hi!

We have found an issue related to the checkboxes in a ResultsTable. We talked about it with @Jialecl and he recommended us to post the case in a comment on this issue:

When we select an item from the table, the selected status of the checkbox is inconsistent.

Here, you have the implementation of the checkbox in the table cell:

{
    displayValue: (
      <DxcCheckbox
        defaultChecked={deploymentPackage.isSelected === true}
        disabled={disabled}
        size="fillParent"
        value={`deploymentPackages.${deploymentPackage.id}`}
      />
    ),
    sortValue: `${deploymentPackage.isSelected ?? false}`,
},

Thanks, everyone! 😃

[Mil4n0r]

Hi @AlanPadi95, first of all thanks for your review.

I would like to see the rest of the code (including the search and the criteria for the isSelected property) to be able to provide more details.

From what I can see, what you are currently experiencing is the expected behavior. I assume that the first row (Assure CSAM Console Application) is being checked because of the defaultChecked condition being true. On the other hand, when you are checking one of the boxes, according to the code that you provided it seems that no onChange option is set in order to maintain each Checkbox's value updated so, as soon as you rerender the component (for example, changing the page), the value for the Checkbox does not persist by default.

AFAIK, you would need to implement something similar to this inside of a loop to achieve the wanted result.

Please let me know if that helps.

[AlanPadi95]

Hey!

Sorry for the wait.

I'm using the react-hook-form controller to manage forms our forms and when we have a list selectable of data we make it a belong.

{
  displayValue: (
    <Controller
       control={control}
       defaultValue={deploymentPackage.isSelected === true}
       disabled={disabled}
       name={`deploymentPackages.${deploymentPackage.id}`}
       render={({ field }) => (
         <DxcCheckbox
           checked={field.value as boolean}
           onChange={(value: boolean) => {
           handleSelectedDeploymentPackages({
             selected: value,
             id: deploymentPackage.id ?? "",
            });
              field.onChange(value);
             }}
             size="fillParent"
             value={field.name}
           />
       )}
    />
  ),
  sortValue: selectedDeploymentPackages.includes(deploymentPackage.id ?? "")
}

We don't want to control the value of each checkbox because we use the controller and the form to do that. I have also tested this with your implementation and it's failed as well.

<DxcCheckbox
  defaultChecked={deploymentPackage.isSelected === true}
  disabled={disabled}
  name={`deploymentPackages.${deploymentPackage.id}`}
  onChange={(value) => {
     handleSelectedDeploymentPackages({
       selected: value,
       id: deploymentPackage.id ?? "",
     });
   }}
  size="fillParent"
  value={`deploymentPackages.${deploymentPackage.id}`}
/>

But, in any case, let me know if there's something wrong with my code

[Mil4n0r]

Thank you for the feedback @AlanPadi95 , I am currently working on a solution for it.