diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js index 7ac312e30571..f6fa275b893a 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js @@ -84,6 +84,40 @@ describe( cy.get(".t--widget-textwidget").should("contain", "false"); _.deployMode.DeployApp(); }); + + it("Validate onCheckChange event is triggered on programmatic state change", function () { + cy.openPropertyPane("textwidget"); + cy.updateCodeInput(".t--property-control-text", `{{checker.isChecked}}`); + _.agHelper.GetNAssertElementText(_.locators._textWidget, "false"); + + cy.openPropertyPane("checkboxwidget"); + _.propPane.EnterJSContext( + "onCheckChange", + "{{showAlert('Checkbox state changed programmatically')}}", + ); + + cy.openPropertyPane("buttonwidget"); + _.propPane.EnterJSContext( + "onClick", + "{{checker.setValue(!checker.isChecked)}}", + ); + + _.agHelper.ClickButton("Submit"); + _.agHelper.ValidateToastMessage( + "Checkbox state changed programmatically", + ); + + _.agHelper.GetNAssertElementText(_.locators._textWidget, "true"); + + _.agHelper.ClickButton("Submit"); + _.agHelper.ValidateToastMessage( + "Checkbox state changed programmatically", + ); + + _.agHelper.GetNAssertElementText(_.locators._textWidget, "false"); + + _.deployMode.DeployApp(); + }); }, ); diff --git a/app/client/src/widgets/CheckboxWidget/widget/index.tsx b/app/client/src/widgets/CheckboxWidget/widget/index.tsx index 8edf883f8e77..21479981ecfd 100644 --- a/app/client/src/widgets/CheckboxWidget/widget/index.tsx +++ b/app/client/src/widgets/CheckboxWidget/widget/index.tsx @@ -416,6 +416,20 @@ class CheckboxWidget extends BaseWidget { ) { this.props.updateWidgetMetaProperty("isDirty", false); } + + // Handle programmatic changes + if ( + this.props.isChecked !== prevProps.isChecked && + this.props.onCheckChange + ) { + this.props.updateWidgetMetaProperty("isChecked", this.props.isChecked, { + triggerPropertyName: "onCheckChange", + dynamicString: this.props.onCheckChange, + event: { + type: EventType.ON_CHECK_CHANGE, + }, + }); + } } static getSetterConfig(): SetterConfig {