fix: datepicker doesnt close on first selection of date on month change

app/client/cypress/e2e/Regression/ClientSide/Widgets/Datepicker/DatePicker4_spec.js

@@ -0,0 +1,42 @@
+import {
+  draggableWidgets,
+  entityExplorer,
+  agHelper,
+} from "../../../../../support/Objects/ObjectsCore";
+import * as _ from "../../../../../support/Objects/ObjectsCore";
+import { datePickerlocators } from "../../../../../locators/WidgetLocators";
+
+describe(
+  "DatePicker Widget Property pane tests with js bindings",
+  { tags: ["@tag.Widget", "@tag.Datepicker"] },
+  function () {
+    before(() => {
+      entityExplorer.DragDropWidgetNVerify(draggableWidgets.DATEPICKER);
+    });
+
+    function navigateAndSelectRandomDate(direction) {
+      const buttonClass =
+        direction === "prev"
+          ? ".DayPicker-NavButton--prev"
+          : ".DayPicker-NavButton--next";
+      agHelper.AssertElementVisibility(buttonClass, true, 0);
+      agHelper.GetNClick(buttonClass);
+      cy.get(".DayPicker-Month")
+        .first()
+        .find(".DayPicker-Day")
+        .then(($days) => {
+          const randomIndex = Math.floor(Math.random() * $days.length);
+          cy.wrap($days[randomIndex]).click();
+        });
+    }
+
+    it("1.should close datepicker on single click when month is changed", function () {
+      agHelper.GetNClick(datePickerlocators.input);
+      navigateAndSelectRandomDate("prev");
+      agHelper.GetNClick(datePickerlocators.input);
+      navigateAndSelectRandomDate("prev");
+      agHelper.GetNClick(datePickerlocators.input);
+      navigateAndSelectRandomDate("next");
+    });
+  },
+);

app/client/src/widgets/DatePickerWidget2/component/index.tsx

@@ -377,7 +377,7 @@ class DatePickerComponent extends React.Component<
               }}
               maxDate={maxDate}
               minDate={minDate}
-              onChange={this.onDateSelected}
+              onChange={this.handleDateChange}
               parseDate={this.parseDate}
               placeholder={"Select Date"}
               popoverProps={{
@@ -481,6 +481,14 @@ class DatePickerComponent extends React.Component<
       onDateSelected(date);
     }
   };
+  handleDateChange = (selectedDate: Date | null) => {
+    const formattedDate = selectedDate
+      ? moment(selectedDate).format(ISO_DATE_FORMAT)
+      : "";
+    this.setState({ selectedDate: formattedDate }, () => {
+      this.props.onDateSelected(formattedDate);
+    });
+  };
 }
 
 interface DatePickerComponentProps extends ComponentProps {