From a1181523df2bf1febca2d73d45aa585be5782562 Mon Sep 17 00:00:00 2001
From: Rahul Barwal <rahul.barwal@appsmith.com>
Date: Mon, 31 Mar 2025 16:44:20 +0530
Subject: [PATCH] feat: Add programmatic state change validation for Checkbox
 widget (#39980)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
In the case of programmatically changing the checkbox state, the
onCheckboxChange event was not being triggered. I have added logic to
handle this issue.

Fixes #`Issue Number`
_or_
Fixes https://github.com/appsmithorg/appsmith-ee/issues/6823
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.Checkbox"

### :mag: 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/14169747454>
> Commit: 81c1da076cf7d5abbbae65c0c4cf6d5906fc1d3b
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14169747454&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Checkbox`
> Spec:
> <hr>Mon, 31 Mar 2025 11:11:12 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

- **New Features**
- Enhanced the checkbox widget to reflect programmatic state changes
with corresponding UI updates and notifications.
- **Tests**
- Added a new automated test case to validate that programmatic changes
to the checkbox state trigger the appropriate alerts and update the UI
accordingly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Widgets/Checkbox/CheckBox_spec.js         | 34 +++++++++++++++++++
 .../widgets/CheckboxWidget/widget/index.tsx   | 14 ++++++++
 2 files changed, 48 insertions(+)

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 7ac312e305..f6fa275b89 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 8edf883f8e..21479981ec 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<CheckboxWidgetProps, WidgetState> {
     ) {
       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 {