Ajax callbacks on paginated forms with PagerSelectExtender not updating on first callback

Problem/Motivation

If you create a form with a pager, and a table with rows that have Ajax callbacks that alter the form render array, unexpected behavior happens. The issue concerns the behavior of Drupal when using Ajax callbacks in combination with paginated results generated using the Drupal\Core\Database\Query\PagerSelectExtender. Specifically, the problem gets reproduced when an Ajax callback is triggered on the second page of a paginated table. In such cases, the callback may not update the content correctly for the initially clicked row; but, subsequent clicks on the same non-first page work as expected (after the initial Ajax callback).

Steps to reproduce

First, you need to build:

• Create a query that uses the Drupal\Core\Database\Query\PagerSelectExtender to get paginated results.
• Use those results to build a table in a Drupal form.
• For each row in the table, add a callback to alter the table render array rows (the results returned by the query).
• Add a pager render element in the form.

To reproduce the issue:

• Go to the form route, and go to any page but the first one.
• Click on the callback for any row.
• The row item it should've been altered, won't be altered.
• Click on another callback.
• The row will be altered.

You can check this snippet as to how it can be triggered.

You can check the first comment to get a more in-depth explanation of the issue and why it happens.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet