diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Switch/SwitchGroup1_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Switch/SwitchGroup1_spec.ts index 8905e7ed4d..2e965258b0 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Switch/SwitchGroup1_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Switch/SwitchGroup1_spec.ts @@ -217,7 +217,7 @@ describe( agHelper.TypeText(widgetsLoc.RadioInput, "{{BLUE}}", 1); propPane.ToggleJSMode("Options", true); agHelper.AssertElementAbsence(locators._toastMsg); - agHelper.GetNAssertElementText(widgets.textWidget, "RED"); + agHelper.GetNAssertElementText(widgets.textWidget, ""); }); it("4. Set Label, Tooltip, Inline and check switch group", () => { @@ -278,7 +278,7 @@ describe( 0, true, ); - agHelper.AssertElementVisibility(locators._visibleTextSpan("RED")); + agHelper.AssertElementVisibility(locators._visibleTextSpan("BLUE")); }); }, ); diff --git a/app/client/src/widgets/CheckboxGroupWidget/widget/index.test.tsx b/app/client/src/widgets/CheckboxGroupWidget/widget/index.test.tsx index add2c666c8..0fe974b07c 100644 --- a/app/client/src/widgets/CheckboxGroupWidget/widget/index.test.tsx +++ b/app/client/src/widgets/CheckboxGroupWidget/widget/index.test.tsx @@ -61,4 +61,21 @@ describe("", () => { expect(result).toStrictEqual({ isValid: true, parsed: ["blue"] }); }); + + test("should return empty array when default value is not in options", async () => { + const result = defaultSelectedValuesValidation(`["blue"]`, { + options: [ + { + label: "Apple", + value: "1", + }, + { + label: "Orange", + value: "2", + }, + ], + }); + + expect(result).toStrictEqual({ isValid: true, parsed: [] }); + }); }); diff --git a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx index 7a882633f4..fe4090a208 100644 --- a/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx +++ b/app/client/src/widgets/CheckboxGroupWidget/widget/index.tsx @@ -35,12 +35,18 @@ import { FlexVerticalAlignment } from "layoutSystems/common/utils/constants"; export function defaultSelectedValuesValidation( value: unknown, + props: any, ): ValidationResponse { let values: string[] = []; + const options: OptionProps[] = props.options || []; if (typeof value === "string") { try { values = JSON.parse(value); + values = values.filter((value: string) => + options.some((option: OptionProps) => option.value === value), + ); + if (!Array.isArray(values)) { throw new Error(); } @@ -154,6 +160,12 @@ class CheckboxGroupWidget extends BaseWidget< }; } + static getDependencyMap(): Record { + return { + defaultSelectedValues: ["options"], + }; + } + static getAutocompleteDefinitions(): AutocompletionDefinitions { return { "!doc": @@ -614,6 +626,17 @@ class CheckboxGroupWidget extends BaseWidget< } componentDidUpdate(prevProps: CheckboxGroupWidgetProps) { + const validSelectedValues = prevProps.selectedValues.filter( + (value: string) => + prevProps.options.some((option) => option.value === value), + ); + if (validSelectedValues.length !== prevProps.selectedValues.length) { + this.props.updateWidgetMetaProperty( + "selectedValues", + validSelectedValues, + ); + } + // Reset isDirty to false whenever defaultSelectedValues changes if ( xor(this.props.defaultSelectedValues, prevProps.defaultSelectedValues)