how to recursively scroll a virtualized list until a row has entered the viewport in javascript in cypress in javascript

index.tsx
// Recursive function to scroll the virtualized list
function scrollListUntilRowVisible(rowIndex, listSelector, rowSelector, rowHeight) {
  // Get the total number of rows in the list
  const totalRows = Cypress.$(listSelector).find(rowSelector).length;

  // Calculate the top offset of the desired row
  const rowTopOffset = rowIndex * rowHeight;

  // Scroll the list to the desired row
  cy.get(listSelector)
    .scrollTo(0, rowTopOffset)
    .wait(500) // Wait for the list to render

  // Check if the desired row is in the viewport
  cy.get(listSelector)
    .find(rowSelector)
    .eq(rowIndex)
    .then((row) => {
      const rowRect = row[0].getBoundingClientRect();
      const listRect = Cypress.$(listSelector)[0].getBoundingClientRect();

      if (rowRect.top < listRect.top || rowRect.bottom > listRect.bottom) {
        // If the row is not visible, recursively scroll with a new position
        return scrollListUntilRowVisible(rowIndex, listSelector, rowSelector, rowHeight);
      }

      // If the row is visible, return it
      return row;
    });
}
1077 chars
31 lines

index.tsx
scrollListUntilRowVisible(42, '#my-virtualized-list', '.row', 50).then((row) => {
  // Do something with the visible row
});
125 chars
4 lines