@instructure/ui-date-time-input 10.9.0 → 10.9.1-pr-snapshot-1734382183600

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.9.1-pr-snapshot-1734382183600](https://github.com/instructure/instructure-ui/compare/v10.9.0...v10.9.1-pr-snapshot-1734382183600) (2024-12-16)
+
+
+### Bug Fixes
+
+* **ui-date-time-input:** fix DateTimeInput displaying wrong value of its value is changed in a onChange callback ([c4be5d3](https://github.com/instructure/instructure-ui/commit/c4be5d3f96de8fe9b2e562677737bc567cce9fa8))
+
+
+
+
+
 # [10.9.0](https://github.com/instructure/instructure-ui/compare/v10.8.0...v10.9.0) (2024-12-12)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input

package/es/DateTimeInput/index.js

@@ -112,8 +112,16 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_DateTimeInput = class Da
         };
       }
       if (this.areDifferentDates(this.state.iso, newState.iso)) {
-        var _this$props$onChange, _this$props, _newState$iso;
-        (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e, (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString());
+        if (typeof this.props.onChange === 'function') {
+          var _newState$iso;
+          const newDate = (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString();
+          // Timeout is needed here because users might change value in the
+          // onChange event lister, which might not execute properly
+          window.setTimeout(() => {
+            var _this$props$onChange, _this$props;
+            (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e, newDate);
+          }, 0);
+        }
       }
       this.setState(newState);
     };

package/lib/DateTimeInput/index.js

@@ -120,8 +120,16 @@ let DateTimeInput = exports.DateTimeInput = (_dec = (0, _testable.testable)(), _
         };
       }
       if (this.areDifferentDates(this.state.iso, newState.iso)) {
-        var _this$props$onChange, _this$props, _newState$iso;
-        (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e, (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString());
+        if (typeof this.props.onChange === 'function') {
+          var _newState$iso;
+          const newDate = (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString();
+          // Timeout is needed here because users might change value in the
+          // onChange event lister, which might not execute properly
+          window.setTimeout(() => {
+            var _this$props$onChange, _this$props;
+            (_this$props$onChange = (_this$props = this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props, e, newDate);
+          }, 0);
+        }
       }
       this.setState(newState);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "10.9.0",
+  "version": "10.9.1-pr-snapshot-1734382183600",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,8 +23,8 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.9.0",
-    "@instructure/ui-test-utils": "10.9.0",
+    "@instructure/ui-babel-preset": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-test-utils": "10.9.1-pr-snapshot-1734382183600",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -32,20 +32,20 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.9.0",
-    "@instructure/shared-types": "10.9.0",
-    "@instructure/ui-a11y-content": "10.9.0",
-    "@instructure/ui-buttons": "10.9.0",
-    "@instructure/ui-calendar": "10.9.0",
-    "@instructure/ui-date-input": "10.9.0",
-    "@instructure/ui-form-field": "10.9.0",
-    "@instructure/ui-i18n": "10.9.0",
-    "@instructure/ui-icons": "10.9.0",
-    "@instructure/ui-prop-types": "10.9.0",
-    "@instructure/ui-react-utils": "10.9.0",
-    "@instructure/ui-testable": "10.9.0",
-    "@instructure/ui-time-select": "10.9.0",
-    "@instructure/ui-utils": "10.9.0",
+    "@instructure/console": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/shared-types": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-a11y-content": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-buttons": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-calendar": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-date-input": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-form-field": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-i18n": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-icons": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-prop-types": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-react-utils": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-testable": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-time-select": "10.9.1-pr-snapshot-1734382183600",
+    "@instructure/ui-utils": "10.9.1-pr-snapshot-1734382183600",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/DateTimeInput/index.tsx

@@ -351,7 +351,14 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
       newState.message = { text: text, type: 'error' }
     }
     if (this.areDifferentDates(this.state.iso, newState.iso)) {
-      this.props.onChange?.(e, newState.iso?.toISOString())
+      if (typeof this.props.onChange === 'function') {
+        const newDate = newState.iso?.toISOString()
+        // Timeout is needed here because users might change value in the
+        // onChange event lister, which might not execute properly
+        window.setTimeout(() => {
+          this.props.onChange?.(e, newDate)
+        }, 0)
+      }
     }
     this.setState(newState)
   }
@@ -439,12 +446,12 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
       // Please note that this causes one hour of time difference in the affected timezones/dates and to
       // fully solve this bug we need to change to something like luxon which handles this properly
       if (currDate.clone().format('HH') === '23') {
-        arr.push(currDate.clone().add({hours: 1}))
+        arr.push(currDate.clone().add({ hours: 1 }))
       } else {
         arr.push(currDate.clone())
       }
 
-      currDate.add({days: 1})
+      currDate.add({ days: 1 })
     }
     return arr.map((date) => {
       const dateStr = date.toISOString()