Skip to content

Commit 69e9d24

Browse files
committed
fix(ui-date-time-input): fix DateTimeInput displaying wrong value of its value is changed in a onChange callback
Closes: INSTUI-4406 I could only repropduce it in CodeSandbox, but according to React documentation setState is not synchronous so the results are not deterministic TEST PLAN: Make a DateTimeInput whose value changes in an onChange listerer on CodeSandbox. It should update properly
1 parent 4e07f9a commit 69e9d24

File tree

1 file changed

+10
-3
lines changed
  • packages/ui-date-time-input/src/DateTimeInput

1 file changed

+10
-3
lines changed

packages/ui-date-time-input/src/DateTimeInput/index.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,14 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
351351
newState.message = { text: text, type: 'error' }
352352
}
353353
if (this.areDifferentDates(this.state.iso, newState.iso)) {
354-
this.props.onChange?.(e, newState.iso?.toISOString())
354+
if (typeof this.props.onChange === 'function') {
355+
const newDate = newState.iso?.toISOString()
356+
// Timeout is needed here because users might change value in the
357+
// onChange event lister, which might not execute properly
358+
window.setTimeout(() => {
359+
this.props.onChange?.(e, newDate)
360+
}, 0)
361+
}
355362
}
356363
this.setState(newState)
357364
}
@@ -439,12 +446,12 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
439446
// Please note that this causes one hour of time difference in the affected timezones/dates and to
440447
// fully solve this bug we need to change to something like luxon which handles this properly
441448
if (currDate.clone().format('HH') === '23') {
442-
arr.push(currDate.clone().add({hours: 1}))
449+
arr.push(currDate.clone().add({ hours: 1 }))
443450
} else {
444451
arr.push(currDate.clone())
445452
}
446453

447-
currDate.add({days: 1})
454+
currDate.add({ days: 1 })
448455
}
449456
return arr.map((date) => {
450457
const dateStr = date.toISOString()

0 commit comments

Comments
 (0)