refactor(ui-date-time-input): fix previous message showing when input…

… is cleared
instructure · Oct 13, 2023 · ae04c06 · ae04c06
1 parent a656649
commit ae04c06
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/packages/ui-date-time-input/src/DateTimeInput/README.md b/packages/ui-date-time-input/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()

diff --git a/packages/ui-date-time-input/src/DateTimeInput/__tests__/DateTimeInput.test.tsx b/packages/ui-date-time-input/src/DateTimeInput/__tests__/DateTimeInput.test.tsx
@@ -850,7 +850,7 @@ describe('<DateTimeInput />', async () => {
     expect(timeInput).to.have.value(newDateTime.format('LT'))
   })
 
-  it.only('should clear TimeSelect when DateInput is cleared', async () => {
+  it('should clear TimeSelect when DateInput is cleared', async () => {
     const locale = 'en-US'
     const timezone = 'US/Eastern'
     const dateTime = DateTime.parse('2017-05-01T17:30Z', locale, timezone)
@@ -888,6 +888,9 @@ describe('<DateTimeInput />', async () => {
     await wait(() => {
       expect(dateInput).to.have.value('')
       expect(timeInput).to.have.value('')
+      dateTimeInput.find(':contains("whoops")', {
+        expectEmpty: true
+      })
     })
   })
 

diff --git a/packages/ui-date-time-input/src/DateTimeInput/index.tsx b/packages/ui-date-time-input/src/DateTimeInput/index.tsx
@@ -172,7 +172,15 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
       }
     }
     // if there is no date string clear TimeSelect value
-    const clearTimeSelect = dateStr ? {} : { timeSelectValue: '' }
+    const clearTimeSelect: Partial<DateTimeInputState> = dateStr
+      ? {}
+      : {
+          timeSelectValue: '',
+          message: {
+            type: 'success',
+            text: ''
+          }
+        }
     return {
       iso: undefined,
       calendarSelectedDate: undefined,