feat: Allow dynamic value change for date picker #1154 (#2091)

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(<XDatePicker model={{ name, value: '1999-12-30' }} />)
+    expect(wave.args[name]).toBe('1999-12-30')
+    rerender(<XDatePicker model={{ name, value: '1999-12-31' }} />)
+    expect(wave.args[name]).toBe('1999-12-31')
+  })
+
+  it('Set args when value is updated to intial value', () => {
+    const { getAllByRole, getAllByText, rerender } = render(<XDatePicker model={{ name, value: '1999-12-30' }} />)
+    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(<XDatePicker model={{ name, value: '1999-12-30' }} />)
+    expect(wave.args[name]).toBe('1999-12-30')
+  })
+
   it('Calls sync when trigger specified', () => {
     const pushMock = jest.fn()
     const { getAllByRole, getAllByText } = render(<XDatePicker model={{ ...datepickerProps, trigger: true }} />)

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 (
       <Fluent.DatePicker