fix: allow dynamic value change for date picker

h2oai · Aug 2, 2023 · 5780ee9 · 5780ee9
1 parent 2e8b48b
commit 5780ee9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/ui/src/date_picker.test.tsx b/ui/src/date_picker.test.tsx
@@ -46,6 +46,13 @@ describe('Datepicker.tsx', () => {
     expect(wave.args[name]).toBeTruthy()
   })
 
+  it('Set args when value is updated', () => {
+    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('Calls sync when trigger specified', () => {
     const pushMock = jest.fn()
     const { getAllByRole, getAllByText } = render(<XDatePicker model={{ ...datepickerProps, trigger: true }} />)

diff --git a/ui/src/date_picker.tsx b/ui/src/date_picker.tsx
@@ -73,8 +73,11 @@ export const
         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