fix(ui-date-time-input): clear TimeSelect value when DateInput value …

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

Hide file tree

Showing 2 changed files with 47 additions and 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
@@ -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
@@ -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}