From 7b491320178d42f621ba4f7987b4b8eefc33daf3 Mon Sep 17 00:00:00 2001
From: Matyas Forian-Szabo <matyas.szabo@instructure.com>
Date: Tue, 10 Oct 2023 10:23:42 +0200
Subject: [PATCH] fix(ui-date-time-input): clear TimeSelect value when
 DateInput value is cleared

---
 .../__tests__/DateTimeInput.test.tsx          | 41 +++++++++++++++++++
 .../src/DateTimeInput/index.tsx               |  9 ++--
 2 files changed, 47 insertions(+), 3 deletions(-)

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
index 8c3e3cc469..3af9850cbe 100644
--- 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,6 +850,47 @@ describe('<DateTimeInput />', async () => {
     expect(timeInput).to.have.value(newDateTime.format('LT'))
   })
 
+  it.only('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)
+
+    const subject = await mount(
+      <DateTimeInput
+        description="date time"
+        dateRenderLabel="date"
+        prevMonthLabel="Previous month"
+        nextMonthLabel="Next month"
+        timeRenderLabel="time"
+        invalidDateTimeMessage="whoops"
+        locale={locale}
+        timezone={timezone}
+        value={dateTime.toISOString()}
+      />
+    )
+
+    const dateTimeInput = await DateTimeInputLocator.find()
+    const dateLocator = await dateTimeInput.findDateInput()
+    const timeLocator = await dateTimeInput.findTimeInput()
+    const dateInput = await dateLocator.findInput()
+    const timeInput = await timeLocator.findInput()
+    // 1. clear programmatically
+    await subject.setProps({ value: undefined })
+    expect(dateInput).to.have.value('')
+    expect(timeInput).to.have.value('')
+    // 2. clear via keyboard input
+    const newDateStr = '2022-03-29T19:00Z'
+    await subject.setProps({ value: newDateStr })
+    expect(dateInput).to.have.value('March 29, 2022')
+    expect(timeInput).to.have.value('3:00 PM')
+    await dateInput.change({ target: { value: '' } })
+    await dateInput.keyUp('escape')
+    await wait(() => {
+      expect(dateInput).to.have.value('')
+      expect(timeInput).to.have.value('')
+    })
+  })
+
   it('should allow the user to enter any time value if allowNonStepInput is true', async () => {
     const onChange = stub()
 
diff --git a/packages/ui-date-time-input/src/DateTimeInput/index.tsx b/packages/ui-date-time-input/src/DateTimeInput/index.tsx
index 3a97b9f73a..9d3342c0d5 100644
--- a/packages/ui-date-time-input/src/DateTimeInput/index.tsx
+++ b/packages/ui-date-time-input/src/DateTimeInput/index.tsx
@@ -171,12 +171,15 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
         }
       }
     }
+    // if there is no date string clear TimeSelect value
+    const clearTimeSelect = dateStr ? {} : { timeSelectValue: '' }
     return {
       iso: undefined,
       calendarSelectedDate: undefined,
       dateInputText: dateStr ? dateStr : '',
       renderedDate: DateTime.now(this.locale(), this.timezone()),
-      dateInputTextChanged: false
+      dateInputTextChanged: false,
+      ...clearTimeSelect
     }
   }
 
@@ -295,7 +298,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     this.changeStateIfNeeded(newState, event)
   }
 
-  handleTimeChange = (
+  updateStateBasedOnTimeSelect = (
     event: SyntheticEvent,
     option: { value?: string; inputText: string }
   ) => {
@@ -566,7 +569,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}