fix: Multiselect widget selected values inside list widget #41214
Conversation
saharAdem
requested review from
vivek-appsmith
and removed request for
a team
WalkthroughIntroduces per-item state for MultiSelectWidgetV2 inside ListWidget by adding selectedValuesByItem keyed by currentIndex. Updates onOptionChange and mergeLabelAndValue to read/write per-item selections and initialize defaults. Adds currentIndex and selectedValuesByItem props. Adds Cypress test validating selection persistence across list item focus changes. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant L as ListWidget
participant M as MultiSelectWidgetV2
participant Meta as selectedValuesByItem (meta)
U->>L: Focus item i
L->>M: Render with currentIndex=i
M->>Meta: Read selectedValuesByItem[i]
alt No entry for i and defaultOptionValue exists
M->>Meta: updateWidgetMetaProperty(i, defaultOptionValue)
end
M-->>U: Display values for item i
U->>M: Select/Deselect option(s)
M->>Meta: updateWidgetMetaProperty(i, newValues) [onOptionChange]
note over M,Meta: Persist per-item selection
U->>L: Focus item j
L->>M: Render with currentIndex=j
M->>Meta: Read selectedValuesByItem[j]
M-->>U: Display values for item j (independent of i)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks (5 passed)✅ Passed checks (5 passed)
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx (2)
849-850: Redundant type assertion can be removedSince
defaultOptionValueis already typed asstring[] | OptionValue[]in the props, the explicit type assertion tostring[]on line 850 is unnecessary.- values = defaultOptionValue as string[]; + values = defaultOptionValue;
906-924: Consider edge case handling for currentIndexThe implementation assumes
currentIndexis always defined, but this might not be true for widgets outside of list contexts. Consider adding a fallback.onOptionChange = (value: DraftValueType) => { - const itemId = this.props.currentIndex; + const itemId = this.props.currentIndex ?? "default"; const updatedValue = { ...(this.props.selectedValuesByItem || {}), [itemId]: value, };
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiselectWidget_Bug 41210 _Spec.ts(1 hunks)app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
app/client/cypress/**/**.*
⚙️ CodeRabbit configuration file
app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
Files:
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiselectWidget_Bug 41210 _Spec.ts
🧠 Learnings (3)
📓 Common learnings
Learnt from: vhemery
PR: appsmithorg/appsmith#37371
File: app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js:35-37
Timestamp: 2024-11-13T09:11:36.959Z
Learning: In the file `app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js`, when writing Cypress end-to-end tests for the Image Widget in JavaScript, use `viewWidgetsPage.imageinner` as the selector when asserting 'src' and 'alt' attributes to maintain consistency.
📚 Learning: 2024-11-13T09:11:36.959Z
Learnt from: vhemery
PR: appsmithorg/appsmith#37371
File: app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js:35-37
Timestamp: 2024-11-13T09:11:36.959Z
Learning: In the file `app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js`, when writing Cypress end-to-end tests for the Image Widget in JavaScript, use `viewWidgetsPage.imageinner` as the selector when asserting 'src' and 'alt' attributes to maintain consistency.
Applied to files:
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiselectWidget_Bug 41210 _Spec.ts
📚 Learning: 2024-10-08T15:32:34.115Z
Learnt from: abhishek-bandameedi
PR: appsmithorg/appsmith#35133
File: app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox2_spec.js:0-0
Timestamp: 2024-10-08T15:32:34.115Z
Learning: In Cypress tests for the Appsmith project, ensure the use of locator variables for selectors and include multiple assertions for comprehensive testing.
Applied to files:
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiselectWidget_Bug 41210 _Spec.ts
🔇 Additional comments (1)
app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx (1)
839-856: Good implementation of per-item selection persistenceThe logic correctly tracks selections per list item using currentIndex as the key and properly initializes with default values when an item hasn't been accessed before.
| import { locators } from "../../../../support/Objects/ObjectsCore"; | ||
| import * as _ from "../../../../support/Objects/ObjectsCore"; | ||
|
|
||
| const widgetSelector = (name: string) => `[data-widgetname-cy="${name}"]`; | ||
|
|
||
| describe("Bug 41210: MultiSelectWidgetV2 inside ListWidget - selected values and labels persist per item", function () { | ||
| before(() => { | ||
| _.agHelper.AddDsl("Listv2/emptyList"); | ||
| }); | ||
|
|
||
| it("should persist selected values for each list item and initialize with default values on first render", function () { | ||
| cy.dragAndDropToWidget("multiselectwidgetv2", "containerwidget", { | ||
| x: 250, | ||
| y: 50, | ||
| }); | ||
| _.propPane.UpdatePropertyFieldValue("Default selected values", '["GREEN"]'); | ||
| _.agHelper.GetNClick(locators._enterPreviewMode); | ||
| _.agHelper.SelectFromMultiSelect(["Red"]); | ||
|
|
||
| const listContainer = `${widgetSelector("List1")} [type="CONTAINER_WIDGET"]`; | ||
|
|
||
| cy.get(listContainer).eq(1).click(); | ||
| cy.get(listContainer).eq(0).click(); | ||
| cy.get( | ||
| `${widgetSelector("MultiSelect1")} .rc-select-selection-item`, | ||
| ).should("contain.text", "Red"); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Fix the filename to follow naming conventions
The filename contains a space between "Bug" and "41210" which violates standard naming conventions. Rename the file to use underscores or camelCase consistently.
-MultiselectWidget_Bug 41210 _Spec.ts
+MultiselectWidget_Bug41210_Spec.tsCommittable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiselectWidget_Bug
41210 _Spec.ts lines 1-28: the filename contains a space ("Bug 41210") which
violates repo naming conventions; rename the file to remove spaces (e.g.,
MultiselectWidget_Bug_41210_Spec.ts or multiselectWidgetBug41210Spec.ts) using
git mv, update any CI/test references or import paths that point to the old
filename, and ensure the test runner configuration or any documentation is
updated accordingly so the test still runs under the new name.
| it("should persist selected values for each list item and initialize with default values on first render", function () { | ||
| cy.dragAndDropToWidget("multiselectwidgetv2", "containerwidget", { | ||
| x: 250, | ||
| y: 50, | ||
| }); | ||
| _.propPane.UpdatePropertyFieldValue("Default selected values", '["GREEN"]'); | ||
| _.agHelper.GetNClick(locators._enterPreviewMode); | ||
| _.agHelper.SelectFromMultiSelect(["Red"]); | ||
|
|
||
| const listContainer = `${widgetSelector("List1")} [type="CONTAINER_WIDGET"]`; | ||
|
|
||
| cy.get(listContainer).eq(1).click(); | ||
| cy.get(listContainer).eq(0).click(); | ||
| cy.get( | ||
| `${widgetSelector("MultiSelect1")} .rc-select-selection-item`, | ||
| ).should("contain.text", "Red"); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Test lacks comprehensive assertions
The test only verifies that "Red" is selected but doesn't verify:
- That the default value "GREEN" was initially selected
- That other list items maintain their own selections
- That the selection persists after multiple navigations
it("should persist selected values for each list item and initialize with default values on first render", function () {
cy.dragAndDropToWidget("multiselectwidgetv2", "containerwidget", {
x: 250,
y: 50,
});
_.propPane.UpdatePropertyFieldValue("Default selected values", '["GREEN"]');
_.agHelper.GetNClick(locators._enterPreviewMode);
+
+ // Verify default value is selected
+ cy.get(
+ `${widgetSelector("MultiSelect1")} .rc-select-selection-item`,
+ ).should("contain.text", "Green");
+
_.agHelper.SelectFromMultiSelect(["Red"]);
const listContainer = `${widgetSelector("List1")} [type="CONTAINER_WIDGET"]`;
+ // Navigate to second item and verify it has the default value
cy.get(listContainer).eq(1).click();
+ cy.get(
+ `${widgetSelector("MultiSelect1")} .rc-select-selection-item`,
+ ).should("contain.text", "Green");
+
+ // Return to first item and verify Red persists
cy.get(listContainer).eq(0).click();
cy.get(
`${widgetSelector("MultiSelect1")} .rc-select-selection-item`,
).should("contain.text", "Red");
+
+ // Navigate again to ensure persistence
+ cy.get(listContainer).eq(1).click();
+ cy.get(listContainer).eq(0).click();
+ cy.get(
+ `${widgetSelector("MultiSelect1")} .rc-select-selection-item`,
+ ).should("contain.text", "Red");
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| it("should persist selected values for each list item and initialize with default values on first render", function () { | |
| cy.dragAndDropToWidget("multiselectwidgetv2", "containerwidget", { | |
| x: 250, | |
| y: 50, | |
| }); | |
| _.propPane.UpdatePropertyFieldValue("Default selected values", '["GREEN"]'); | |
| _.agHelper.GetNClick(locators._enterPreviewMode); | |
| _.agHelper.SelectFromMultiSelect(["Red"]); | |
| const listContainer = `${widgetSelector("List1")} [type="CONTAINER_WIDGET"]`; | |
| cy.get(listContainer).eq(1).click(); | |
| cy.get(listContainer).eq(0).click(); | |
| cy.get( | |
| `${widgetSelector("MultiSelect1")} .rc-select-selection-item`, | |
| ).should("contain.text", "Red"); | |
| }); | |
| it("should persist selected values for each list item and initialize with default values on first render", function () { | |
| cy.dragAndDropToWidget("multiselectwidgetv2", "containerwidget", { | |
| x: 250, | |
| y: 50, | |
| }); | |
| _.propPane.UpdatePropertyFieldValue("Default selected values", '["GREEN"]'); | |
| _.agHelper.GetNClick(locators._enterPreviewMode); | |
| // Verify default value is selected | |
| cy.get( | |
| `${widgetSelector("MultiSelect1")} .rc-select-selection-item`, | |
| ).should("contain.text", "Green"); | |
| _.agHelper.SelectFromMultiSelect(["Red"]); | |
| const listContainer = `${widgetSelector("List1")} [type="CONTAINER_WIDGET"]`; | |
| // Navigate to second item and verify it has the default value | |
| cy.get(listContainer).eq(1).click(); | |
| cy.get( | |
| `${widgetSelector("MultiSelect1")} .rc-select-selection-item`, | |
| ).should("contain.text", "Green"); | |
| // Return to first item and verify Red persists | |
| cy.get(listContainer).eq(0).click(); | |
| cy.get( | |
| `${widgetSelector("MultiSelect1")} .rc-select-selection-item`, | |
| ).should("contain.text", "Red"); | |
| // Navigate again to ensure persistence | |
| cy.get(listContainer).eq(1).click(); | |
| cy.get(listContainer).eq(0).click(); | |
| cy.get( | |
| `${widgetSelector("MultiSelect1")} .rc-select-selection-item`, | |
| ).should("contain.text", "Red"); | |
| }); |
🤖 Prompt for AI Agents
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiselectWidget_Bug
41210 _Spec.ts lines 11-27: the test only asserts that "Red" is selected but
misses verifying the initial default "GREEN", per-item selection independence,
and persistence after navigation; update the test to first assert that on first
render MultiSelect1 contains "GREEN" (the default), then select a different
option for a second list item and assert that each list item shows its own
selected value (e.g., item0 shows "GREEN", item1 shows "Red"), then navigate
between list items (click other indices) multiple times and re-check the
selections to confirm persistence across navigations; use the same widget
selectors already present (widgetSelector("MultiSelect1") and listContainer
indices) and add assertions after each navigation step to validate the expected
text values.
| cy.dragAndDropToWidget("multiselectwidgetv2", "containerwidget", { | ||
| x: 250, | ||
| y: 50, | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid using coordinate-based drag and drop
Using fixed x,y coordinates (250, 50) for drag and drop operations is brittle and may fail on different screen sizes or when the UI changes. Consider using a more robust approach.
#!/bin/bash
# Check if there are helper methods available for drag and drop operations without coordinates
rg -n --type=ts "dragAndDropToWidget.*widgetSelector" -A 3 -B 3🤖 Prompt for AI Agents
In app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiselectWidget_Bug
41210 _Spec.ts around lines 12 to 15, the test uses fixed x,y coordinates for
cy.dragAndDropToWidget which is brittle; update the call to use a selector-based
target (or the helper's widgetSelector option) so the drop is done relative to
the target element instead of absolute coordinates — either pass the destination
widget selector to cy.dragAndDropToWidget (remove the x/y object) or compute the
target's center via cy.get('<target-selector>').then(el => { use its bounding
box to perform the drag/drop }) so the test works across screen sizes and layout
changes.
| _.agHelper.GetNClick(locators._enterPreviewMode); | ||
| _.agHelper.SelectFromMultiSelect(["Red"]); | ||
|
|
||
| const listContainer = `${widgetSelector("List1")} [type="CONTAINER_WIDGET"]`; |
There was a problem hiding this comment.
Avoid using CSS attribute selectors
The selector [type="CONTAINER_WIDGET"] violates the coding guidelines which specify avoiding attribute selectors. Use data-* attributes instead.
- const listContainer = `${widgetSelector("List1")} [type="CONTAINER_WIDGET"]`;
+ const listContainer = `${widgetSelector("List1")} [data-testid="list-container"]`;Note: Ensure the corresponding data-testid attribute is added to the container widget in the application code.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const listContainer = `${widgetSelector("List1")} [type="CONTAINER_WIDGET"]`; | |
| const listContainer = `${widgetSelector("List1")} [data-testid="list-container"]`; |
🤖 Prompt for AI Agents
In app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiselectWidget_Bug
41210 _Spec.ts around line 20, the selector uses a CSS attribute selector
`[type="CONTAINER_WIDGET"]` which violates guidelines; replace it with a
data-testid selector and update the application to add that data-testid to the
container widget. Change the test to target the container via its data-testid
(e.g., `${widgetSelector("List1")} [data-testid="container-widget-List1"]` or a
stable name you add in the app) and add the corresponding data-testid attribute
to the container widget in the app code.
vivek-appsmith
requested review from
ankitakinger,
jacquesikot and
rahulbarwal
and removed request for
vivek-appsmith
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx (1)
774-780: Add selectedValuesByItem to the meta properties map.selectedValuesByItem is read/updated (componentDidUpdate, onOptionChange) but missing from getMetaPropertiesMap; add selectedValuesByItem: {} to the return object in app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx (around lines 774–780).
🧹 Nitpick comments (3)
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiSelectWidget_Bug41210_Spec.ts (2)
2-2: Remove unnecessary wildcard import.The wildcard import
* as _is not following best practices and is inconsistent with the specificlocatorsimport above it.-import * as _ from "../../../../support/Objects/ObjectsCore"; +import { agHelper, propPane } from "../../../../support/Objects/ObjectsCore";
12-15: Use specific coordinates or consider alternatives to hardcoded positioning.The hardcoded coordinates (x: 250, y: 50) may be brittle across different screen sizes or viewport configurations.
- cy.dragAndDropToWidget("multiselectwidgetv2", "containerwidget", { - x: 250, - y: 50, - }); + cy.dragAndDropToWidget("multiselectwidgetv2", "containerwidget");app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx (1)
991-1019: Add interface documentation for new properties.The new
currentIndexandselectedValuesByItemproperties should be documented to clarify their purpose in the per-item persistence feature.export interface MultiSelectWidgetProps extends WidgetProps { // ... existing properties ... + /** Current index of the list item when widget is inside a ListWidget */ + currentIndex: number; + /** Map of selected values per list item, keyed by list item index */ + selectedValuesByItem?: Record<string, string[] | OptionValue[]>; // ... remaining properties ... }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiSelectWidget_Bug41210_Spec.ts(1 hunks)app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
app/client/cypress/**/**.*
⚙️ CodeRabbit configuration file
app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
Files:
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiSelectWidget_Bug41210_Spec.ts
🧠 Learnings (2)
📚 Learning: 2024-11-13T09:11:36.959Z
Learnt from: vhemery
PR: appsmithorg/appsmith#37371
File: app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js:35-37
Timestamp: 2024-11-13T09:11:36.959Z
Learning: In the file `app/client/cypress/e2e/Regression/ClientSide/Widgets/Image/Image_base64_spec.js`, when writing Cypress end-to-end tests for the Image Widget in JavaScript, use `viewWidgetsPage.imageinner` as the selector when asserting 'src' and 'alt' attributes to maintain consistency.
Applied to files:
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiSelectWidget_Bug41210_Spec.ts
📚 Learning: 2024-10-08T15:32:34.115Z
Learnt from: abhishek-bandameedi
PR: appsmithorg/appsmith#35133
File: app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox2_spec.js:0-0
Timestamp: 2024-10-08T15:32:34.115Z
Learning: In Cypress tests for the Appsmith project, ensure the use of locator variables for selectors and include multiple assertions for comprehensive testing.
Applied to files:
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiSelectWidget_Bug41210_Spec.ts
🧬 Code graph analysis (1)
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiSelectWidget_Bug41210_Spec.ts (1)
app/client/cypress/support/commands.js (2)
_(1071-1071)locators(43-43)
🔇 Additional comments (4)
app/client/cypress/e2e/Regression/ClientSide/BugTests/MultiSelectWidget_Bug41210_Spec.ts (1)
16-26: LGTM! Test logic correctly validates per-item persistence.The test properly validates the bug fix by:
- Setting a default value
- Selecting a different option in the first list item
- Switching focus between list items
- Verifying the selection persists in the original item
The use of data-widgetname-cy selectors and specific container targeting aligns with coding guidelines.
app/client/src/widgets/MultiSelectWidgetV2/widget/index.tsx (3)
813-824: LGTM! Proper initialization of per-item state on default value changes.The implementation correctly handles initialization of per-item selections when
defaultOptionValuechanges, ensuring each list item gets its own selection state.
902-920: LGTM! Per-item selection tracking implemented correctly.The
onOptionChangemethod properly stores selections per list item usingcurrentIndexas the key, maintaining the existing trigger semantics while adding per-item persistence.
924-941: LGTM! Smart initialization of per-item defaults.The
mergeLabelAndValuemethod correctly:
- Retrieves per-item values or falls back to defaults
- Initializes missing per-item state with default values
- Returns the appropriate values for the current list item
This ensures each list item maintains its own selection state while preserving backward compatibility.
|
This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected. |
|
@rahulbarwal @jacquesikot @ankitakinger Could you please review the PR? |
|
This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected. |
|
Hey @Nikhil-Nandagopal, any updates on this? |
|
This PR has not seen activitiy for a while. It will be closed in 7 days unless further activity is detected. |
1 participant
Description
This PR resolves MultiSelect widgets issue, where MultiSelect widgets inside a ListWidget lose their selected values when switching between list items. The fix ensures that selected values are persisted per list item, maintaining user selections as they navigate through the list
Fixes #41210
Automation
/ok-to-test tags=""
🔍 Cypress test results
Caution
If you modify the content in this section, you are likely to disrupt the CI result for your PR.
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
Bug Fixes
Tests