PromucFlow_constructor/app/client/cypress/e2e/Regression/ClientSide
Jacques Ikot c0e073efa3
fix: infinite render loop in List Widget when hiding/unhiding with selected item (#39262)
## Description
When a List widget has a selected item and is hidden then unhidden
(unmounted/mounted), an infinite render loop occurs in the following
flow:

```typescript
// Triggered in componentDidUpdate
if (this.shouldUpdateSelectedItemAndView() && isString(this.props.selectedItemKey)) {
    this.updateSelectedItemAndPageOnResetOrMount();
}
```

### Root Cause
This happens because:

1. `updateSelectedItemAndPageOnResetOrMount` calls `updatePageNumber`.
2. `updatePageNumber` uses `calculatePageNumberFromRowIndex`, which
depends on `this.pageSize`.
3. Each page number calculation triggers a meta property update through
`onPageChange`.
4. This meta update causes a rerender, repeating the cycle.

#### Problematic Calculation
`this.pageSize` is calculated dynamically based on widget dimensions:

```typescript
calculatePageNumberFromRowIndex = (index: number) => {
    return Math.ceil((index + 1) / this.pageSize); // Using unstable this.pageSize
};
```

This creates instability during mount/unmount cycles as:

- Widget dimensions may not be fully stabilized.
- Each meta property update triggers recalculation.
- No break in the update-rerender cycle.

### Solution
Use `this.props.pageSize` instead of `this.pageSize` in page
calculations:

```typescript
calculatePageNumberFromRowIndex = (index: number) => {
    return Math.ceil((index + 1) / this.props.pageSize); // Using stable props value
};
```

### Why This Works
- `this.props.pageSize` represents the last stable value set through the
meta property system.
- It's protected by the existing `pageSizeUpdated` flag mechanism.
- Breaking the dependency on dynamically calculated dimensions prevents
the infinite loop.




Fixes #37683 

## Automation

/ok-to-test tags="@tag.Widget, @tag.Binding, @tag.List, @tag.Sanity"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13366216706>
> Commit: 74028ec9f52aa25daf0d72c7cdf3c4fa9701e86e
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13366216706&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Widget, @tag.Binding, @tag.List, @tag.Sanity`
> Spec:
> <hr>Mon, 17 Feb 2025 10:23:19 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Bug Fixes**
- Improved the list widget’s pagination by updating how page numbers are
calculated, ensuring accurate reflection of the current page size
settings.

- **Tests**
- Enhanced test coverage for the list widget's visibility, adding new
tests to validate user interactions and ensuring the widget behaves as
expected when items are selected.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-02-17 11:43:24 +01:00
..
ActionExecution fix: console log update and fix modal issue (#38692) 2025-01-19 09:25:04 +05:30
AdminSettings test: Admin setting new test cases with email (#38522) 2025-01-30 17:25:07 +05:30
Anvil chore: fix form widgets bugs (#38492) 2025-01-07 17:34:15 +05:30
AppNavigation chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
AuditLogs
Autocomplete feat: update autocomplete sorting (#38690) 2025-01-17 16:30:52 +05:30
Binding chore: update select component (#38954) 2025-02-06 13:10:25 +05:30
Branding
BugTests fix: Enabled js mode by default for Table and Select widget form display ui button (#39032) 2025-02-06 14:50:41 +05:30
CodeComment chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
CommunityTemplate chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Debugger fix: Fix flakiness of JSObjects_navigation_spec.ts spec (#39269) 2025-02-14 16:57:13 +05:30
DynamicHeight chore: removed old flags for airgap instances (#36609) 2024-10-07 15:26:25 +05:30
Editor
EmbedSettings fix: Fix copy issue in embedsetting spec (#38590) 2025-01-13 10:43:55 +05:30
ExplorerTests test: validate 'Show Bindings' menu for queries & JS Objects in split-pane (#38577) 2025-01-13 10:51:17 +05:30
Fork chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
FormLogin
FormNativeToRawTests
Git chore: fixes mergeviaremote_spec flakiness (#38635) 2025-01-14 13:56:46 +01:00
Github
Google
Homepage chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
IDE chore: entity tabs replacement (#38989) 2025-02-06 11:33:54 +03:00
JSLibrary test: adding tests for custom lib (#37901) 2024-12-11 10:56:38 +05:30
JSObject chore: entity tabs replacement (#38989) 2025-02-06 11:33:54 +03:00
Linting feat: Enable new toolbar for cypress (#37148) 2024-12-03 09:21:43 +05:30
Login test: Sign in and Sign up cases (#39028) 2025-02-05 15:20:33 +05:30
MobileResponsiveTests chore: skipping cases for mockdb usage (#38888) 2025-01-30 11:47:38 +05:30
Onboarding chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
OneClickBinding chore: skipping cases for mockdb usage (#38888) 2025-01-30 11:47:38 +05:30
OtherUIFeatures fix: Fix from for promise failure (#39295) 2025-02-17 12:52:38 +05:30
PartialImportExport test: adding test for page functionality (#38538) 2025-01-18 20:26:42 +05:30
PeekOverlay feat: Inspect State CTA for discovery (#39100) 2025-02-14 21:57:08 +05:30
Performance chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
ProductRamps
PropertyPane fix: Revert "Revert "feat: Added focus ring for focus visible (#37700)" (#… (#38655) 2025-02-03 11:12:29 +05:30
PublishedApps test: flaky check for published Spec (#38427) 2025-01-03 12:08:10 +05:30
Refactoring chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
SetProperty chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
SettingsPane
Templates chore: git mod - test fixes (#38357) 2025-01-07 12:30:42 +01:00
ThemingTests chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
UserProfile
VisualTests fix: Checking fix working for js indent failure (#38382) 2024-12-27 08:43:46 +05:30
Widgets fix: infinite render loop in List Widget when hiding/unhiding with selected item (#39262) 2025-02-17 11:43:24 +01:00
Workspace chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30