diff --git a/ui/src/date_picker.test.tsx b/ui/src/date_picker.test.tsx
index 0684983d69c..b76303b0260 100644
--- a/ui/src/date_picker.test.tsx
+++ b/ui/src/date_picker.test.tsx
@@ -46,6 +46,25 @@ describe('Datepicker.tsx', () => {
expect(wave.args[name]).toBeTruthy()
})
+ it('Set args when value is updated to different value', () => {
+ const { rerender } = render()
+ expect(wave.args[name]).toBe('1999-12-30')
+ rerender()
+ expect(wave.args[name]).toBe('1999-12-31')
+ })
+
+ it('Set args when value is updated to intial value', () => {
+ const { getAllByRole, getAllByText, rerender } = render()
+ expect(wave.args[name]).toBe('1999-12-30')
+
+ fireEvent.click(getAllByRole('combobox')[0])
+ fireEvent.click(getAllByText('1')[0])
+ expect(wave.args[name]).not.toBe('1999-12-30')
+
+ rerender()
+ expect(wave.args[name]).toBe('1999-12-30')
+ })
+
it('Calls sync when trigger specified', () => {
const pushMock = jest.fn()
const { getAllByRole, getAllByText } = render()
diff --git a/ui/src/date_picker.tsx b/ui/src/date_picker.tsx
index b040ef36bfc..54356b53617 100644
--- a/ui/src/date_picker.tsx
+++ b/ui/src/date_picker.tsx
@@ -70,11 +70,15 @@ export const
const val = (d === null || d === undefined) ? defaultVal : formatDate(d)
wave.args[m.name] = val
setValue(val ? new Date(`${val}T00:00:00`) : undefined)
+ m.value = val || undefined
if (m.trigger) wave.push()
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- React.useEffect(() => { wave.args[m.name] = defaultVal }, [])
+ React.useEffect(() => {
+ wave.args[m.name] = defaultVal
+ setValue(parsedVal ? new Date(parsedVal) : undefined)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [m.value])
return (