diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/PropertyPane_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/PropertyPane_spec.ts index 6433daf835..5da2544f0d 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/PropertyPane_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/PropertyPane_spec.ts @@ -35,7 +35,58 @@ describe( deployMode.NavigateBacktoEditor(); }); - it("2. Toggle JS - Validate isVisible", function () { + it("2. Validate isVisible when list has selected item (#37683)", () => { + // Define selectors for widgets + const widgetSelector = (name: string) => `[data-widgetname-cy="${name}"]`; + const containerWidgetSelector = `[type="CONTAINER_WIDGET"]`; + + // Drag and drop the Button widget onto the canvas + // entityExplorer.DragDropWidgetNVerify("listwidgetv2", 300, 300); + entityExplorer.DragDropWidgetNVerify("buttonwidget"); + + // Set up the button to make the list visible when clicked + EditorNavigation.SelectEntityByName("Button1", EntityType.Widget); + propPane.EnterJSContext("onClick", `{{List1.setVisibility(true)}}`, true); + + // Set up the list widget to become invisible when an item is clicked + EditorNavigation.SelectEntityByName("List1", EntityType.Widget); + propPane.EnterJSContext( + "onItemClick", + `{{List1.setVisibility(false)}}`, + true, + ); + + // Deploy the application to test the visibility functionality + deployMode.DeployApp(); + + // Simulate a click on the first item in the list to hide the list + agHelper + .GetElement(widgetSelector("List1")) + .find(containerWidgetSelector) + .first() + .click({ force: true }); + agHelper.WaitUntilEleDisappear( + locators._widgetInDeployed(draggableWidgets.LIST_V2), + ); + + // Assert that the list widget is not visible after clicking an item + agHelper.AssertElementAbsence( + locators._widgetInDeployed(draggableWidgets.LIST_V2), + ); + + // Click the button to make the list visible again + agHelper.GetNClick(widgetSelector("Button1")); + + // Assert that the list widget is visible after clicking the button + agHelper.AssertElementVisibility( + locators._widgetInDeployed(draggableWidgets.LIST_V2), + ); + + // Navigate back to the editor after testing + deployMode.NavigateBacktoEditor(); + }); + + it("3. Toggle JS - Validate isVisible", function () { // Open Property pane agHelper.AssertElementVisibility( locators._widgetInDeployed(draggableWidgets.LIST_V2), @@ -61,7 +112,7 @@ describe( deployMode.NavigateBacktoEditor(); }); - it("3. Renaming the widget from Property pane and Entity explorer ", function () { + it("4. Renaming the widget from Property pane and Entity explorer ", function () { // Open Property pane EditorNavigation.SelectEntityByName("List1", EntityType.Widget); // Change the list widget name from property pane and Verify it @@ -73,7 +124,7 @@ describe( agHelper.AssertElementVisibility(locators._widgetName("List1")); }); - it("4. Item Spacing Validation ", function () { + it("5. Item Spacing Validation ", function () { EditorNavigation.SelectEntityByName("List1", EntityType.Widget); propPane.Search("item spacing"); propPane.UpdatePropertyFieldValue("Item Spacing (px)", "-1"); diff --git a/app/client/src/widgets/ListWidgetV2/widget/index.tsx b/app/client/src/widgets/ListWidgetV2/widget/index.tsx index 6f16437d34..6705ba29bb 100644 --- a/app/client/src/widgets/ListWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/ListWidgetV2/widget/index.tsx @@ -878,7 +878,7 @@ class ListWidget extends BaseWidget< }; calculatePageNumberFromRowIndex = (index: number) => { - return Math.ceil((index + 1) / this.pageSize); + return Math.ceil((index + 1) / this.props.pageSize); }; shouldUpdatePageSize = () => {