diff --git a/ui/src/checklist.test.tsx b/ui/src/checklist.test.tsx
index 1cd7619323..e57e1155c2 100644
--- a/ui/src/checklist.test.tsx
+++ b/ui/src/checklist.test.tsx
@@ -46,6 +46,35 @@ describe('Checklist.tsx', () => {
expect(wave.args[name]).toMatchObject(['Choice1', 'Choice2', 'Choice3'])
})
+ it('Set args when value is updated to different value', () => {
+ const { rerender } = render()
+ expect(wave.args[name]).toMatchObject([])
+ rerender()
+ expect(wave.args[name]).toMatchObject(['Choice1'])
+ })
+
+ it('Set args when value is updated to initial value', () => {
+ const { getByText, rerender } = render()
+ expect(wave.args[name]).toMatchObject(['Choice1'])
+
+ fireEvent.click(getByText('Choice2').parentElement!)
+ expect(wave.args[name]).toMatchObject(['Choice1', 'Choice2'])
+
+ rerender()
+ expect(wave.args[name]).toMatchObject(['Choice1'])
+ })
+
+ it('Updates choices', () => {
+ const { rerender, getByText } = render()
+ expect(getByText('Choice1')).toBeInTheDocument()
+ expect(getByText('Choice2')).toBeInTheDocument()
+ expect(getByText('Choice3')).toBeInTheDocument()
+ rerender()
+
+ expect(getByText('Choice3')).toBeInTheDocument()
+ expect(getByText('Choice4')).toBeInTheDocument()
+ })
+
it('Sets all choices as args after select all', () => {
const { getByText } = render()
fireEvent.click(getByText('Select All'))
diff --git a/ui/src/checklist.tsx b/ui/src/checklist.tsx
index 1051fb326d..957e29a808 100644
--- a/ui/src/checklist.tsx
+++ b/ui/src/checklist.tsx
@@ -104,8 +104,7 @@ export const
styles={{ root: { marginBottom: 4 }, checkmark: { display: 'flex' } }} // Fix: Center the checkmark in the checkbox.
/>
))
- // eslint-disable-next-line react-hooks/exhaustive-deps
- React.useEffect(() => { wave.args[m.name] = m.values || [] }, [])
+ React.useEffect(() => { wave.args[m.name] = m.values || [] }, [m.name, m.values])
React.useEffect(() => { setChoices(getMappedChoices()) }, [getMappedChoices, m.choices])
return (