@instructure/ui-date-time-input 8.46.2-snapshot-2 → 8.46.2-snapshot-4

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.46.2-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.46.1...v8.46.2-snapshot-2) (2023-10-17)
+## [8.46.2-snapshot-4](https://github.com/instructure/instructure-ui/compare/v8.46.1...v8.46.2-snapshot-4) (2023-10-18)
 
-**Note:** Version bump only for package @instructure/ui-date-time-input
+
+### Bug Fixes
+
+* **ui-date-time-input:** clear TimeSelect value when DateInput value is cleared ([b1a58e5](https://github.com/instructure/instructure-ui/commit/b1a58e5c04822da491966bc0a79403b30749ff7e))
 
 
 

package/es/DateTimeInput/index.js

@@ -89,7 +89,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         });
       }, 0);
     };
-    this.handleTimeChange = (event, option) => {
+    this.updateStateBasedOnTimeSelect = (event, option) => {
       // this.state.iso is undefined if date is invalid or not set.
       // in this case recalculate with the dateInput's text which will result in
       // an empty valid date (if isRequired is false) or an invalid date.
@@ -252,12 +252,21 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         };
       }
     }
+    // if there is no date string clear TimeSelect value
+    const clearTimeSelect = dateStr ? {} : {
+      timeSelectValue: '',
+      message: {
+        type: 'success',
+        text: ''
+      }
+    };
     return {
       iso: void 0,
       calendarSelectedDate: void 0,
       dateInputText: dateStr ? dateStr : '',
       renderedDate: DateTime.now(this.locale(), this.timezone()),
-      dateInputTextChanged: false
+      dateInputTextChanged: false,
+      ...clearTimeSelect
     };
   }
   locale() {
@@ -447,7 +456,7 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
       renderNavigationLabel: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", null, this.state.renderedDate.format('MMMM')), /*#__PURE__*/React.createElement("div", null, this.state.renderedDate.format('y')))
     }, this.renderDays()), /*#__PURE__*/React.createElement(TimeSelect, {
       value: this.state.timeSelectValue,
-      onChange: this.handleTimeChange,
+      onChange: this.updateStateBasedOnTimeSelect,
       onBlur: this.handleBlur,
       renderLabel: timeRenderLabel,
       locale: locale,

package/lib/DateTimeInput/index.js

@@ -97,7 +97,7 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         });
       }, 0);
     };
-    this.handleTimeChange = (event, option) => {
+    this.updateStateBasedOnTimeSelect = (event, option) => {
       // this.state.iso is undefined if date is invalid or not set.
       // in this case recalculate with the dateInput's text which will result in
       // an empty valid date (if isRequired is false) or an invalid date.
@@ -260,12 +260,21 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         };
       }
     }
+    // if there is no date string clear TimeSelect value
+    const clearTimeSelect = dateStr ? {} : {
+      timeSelectValue: '',
+      message: {
+        type: 'success',
+        text: ''
+      }
+    };
     return {
       iso: void 0,
       calendarSelectedDate: void 0,
       dateInputText: dateStr ? dateStr : '',
       renderedDate: _DateTime.DateTime.now(this.locale(), this.timezone()),
-      dateInputTextChanged: false
+      dateInputTextChanged: false,
+      ...clearTimeSelect
     };
   }
   locale() {
@@ -455,7 +464,7 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
       renderNavigationLabel: /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("div", null, this.state.renderedDate.format('MMMM')), /*#__PURE__*/_react.default.createElement("div", null, this.state.renderedDate.format('y')))
     }, this.renderDays()), /*#__PURE__*/_react.default.createElement(_TimeSelect.TimeSelect, {
       value: this.state.timeSelectValue,
-      onChange: this.handleTimeChange,
+      onChange: this.updateStateBasedOnTimeSelect,
       onBlur: this.handleBlur,
       renderLabel: timeRenderLabel,
       locale: locale,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "8.46.2-snapshot-2",
+  "version": "8.46.2-snapshot-4",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,26 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.46.2-snapshot-2",
-    "@instructure/ui-test-locator": "8.46.2-snapshot-2",
-    "@instructure/ui-test-utils": "8.46.2-snapshot-2"
+    "@instructure/ui-babel-preset": "8.46.2-snapshot-4",
+    "@instructure/ui-test-locator": "8.46.2-snapshot-4",
+    "@instructure/ui-test-utils": "8.46.2-snapshot-4"
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@instructure/debounce": "8.46.2-snapshot-2",
-    "@instructure/emotion": "8.46.2-snapshot-2",
-    "@instructure/ui-a11y-content": "8.46.2-snapshot-2",
-    "@instructure/ui-buttons": "8.46.2-snapshot-2",
-    "@instructure/ui-calendar": "8.46.2-snapshot-2",
-    "@instructure/ui-date-input": "8.46.2-snapshot-2",
-    "@instructure/ui-form-field": "8.46.2-snapshot-2",
-    "@instructure/ui-i18n": "8.46.2-snapshot-2",
-    "@instructure/ui-icons": "8.46.2-snapshot-2",
-    "@instructure/ui-prop-types": "8.46.2-snapshot-2",
-    "@instructure/ui-react-utils": "8.46.2-snapshot-2",
-    "@instructure/ui-testable": "8.46.2-snapshot-2",
-    "@instructure/ui-time-select": "8.46.2-snapshot-2",
-    "@instructure/ui-utils": "8.46.2-snapshot-2",
+    "@instructure/debounce": "8.46.2-snapshot-4",
+    "@instructure/emotion": "8.46.2-snapshot-4",
+    "@instructure/ui-a11y-content": "8.46.2-snapshot-4",
+    "@instructure/ui-buttons": "8.46.2-snapshot-4",
+    "@instructure/ui-calendar": "8.46.2-snapshot-4",
+    "@instructure/ui-date-input": "8.46.2-snapshot-4",
+    "@instructure/ui-form-field": "8.46.2-snapshot-4",
+    "@instructure/ui-i18n": "8.46.2-snapshot-4",
+    "@instructure/ui-icons": "8.46.2-snapshot-4",
+    "@instructure/ui-prop-types": "8.46.2-snapshot-4",
+    "@instructure/ui-react-utils": "8.46.2-snapshot-4",
+    "@instructure/ui-testable": "8.46.2-snapshot-4",
+    "@instructure/ui-time-select": "8.46.2-snapshot-4",
+    "@instructure/ui-utils": "8.46.2-snapshot-4",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/DateTimeInput/README.md

@@ -68,7 +68,7 @@ class Example extends React.Component {
     let messages = []
     if (!isoDate) {
       // this happens if an invalid date is entered
-      this.setState({ messages })
+      this.setState({ messages:messages, value:undefined })
       return
     }
     const now = new Date()

package/src/DateTimeInput/index.tsx

@@ -171,12 +171,23 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
         }
       }
     }
+    // if there is no date string clear TimeSelect value
+    const clearTimeSelect: Partial<DateTimeInputState> = dateStr
+      ? {}
+      : {
+          timeSelectValue: '',
+          message: {
+            type: 'success',
+            text: ''
+          }
+        }
     return {
       iso: undefined,
       calendarSelectedDate: undefined,
       dateInputText: dateStr ? dateStr : '',
       renderedDate: DateTime.now(this.locale(), this.timezone()),
-      dateInputTextChanged: false
+      dateInputTextChanged: false,
+      ...clearTimeSelect
     }
   }
 
@@ -295,7 +306,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     this.changeStateIfNeeded(newState, event)
   }
 
-  handleTimeChange = (
+  updateStateBasedOnTimeSelect = (
     event: SyntheticEvent,
     option: { value?: string; inputText: string }
   ) => {
@@ -566,7 +577,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
         </DateInput>
         <TimeSelect
           value={this.state.timeSelectValue}
-          onChange={this.handleTimeChange}
+          onChange={this.updateStateBasedOnTimeSelect}
           onBlur={this.handleBlur}
           renderLabel={timeRenderLabel}
           locale={locale}