fix: Allow dynamic value change for checkbox #1154

ui/src/checkbox.test.tsx

@@ -33,6 +33,13 @@ describe('Checkbox.tsx', () => {
     expect(queryByTestId(name)).toBeInTheDocument()
   })
 
+  it('Sets args on click', () => {
+    const { getByTestId } = render(<XCheckbox model={checkboxProps} />)
+    fireEvent.click(getByTestId(name))
+
+    expect(wave.args[name]).toBe(true)
+  })
+
   it('Does not display checkbox when visible is false', () => {
     const { queryByTestId } = render(<XCheckbox model={{ ...checkboxProps, visible: false }} />)
     expect(queryByTestId(name)).toBeInTheDocument()
@@ -59,11 +66,19 @@ describe('Checkbox.tsx', () => {
     expect(pushMock).toHaveBeenCalled()
   })
 
-  it('Sets args on click', () => {
-    const { getByTestId } = render(<XCheckbox model={checkboxProps} />)
-    fireEvent.click(getByTestId(name))
-
+  it('Set args when value is updated to different value', () => {
+    const { rerender } = render(<XCheckbox model={{ name, value: true }} />)
     expect(wave.args[name]).toBe(true)
+    rerender(<XCheckbox model={{ name, value: false }} />)
+    expect(wave.args[name]).toBe(false)
   })
 
+  it('Set args when value is updated to initial value', () => {
+    const { getByTestId, rerender } = render(<XCheckbox model={{ name, value: true }} />)
+    expect(wave.args[name]).toBe(true)
+    fireEvent.click(getByTestId(name))
+    expect(wave.args[name]).toBe(false)
+    rerender(<XCheckbox model={{ name, value: true }} />)
+    expect(wave.args[name]).toBe(true)
+  })
 })

ui/src/checkbox.tsx

@@ -56,24 +56,32 @@ export interface Checkbox {
 
 export const
   XCheckbox = ({ model: m }: { model: Checkbox }) => {
-    const onChange = (_e?: React.FormEvent<HTMLElement>, checked?: B) => {
-      wave.args[m.name] = checked === null ? null : !!checked
-      if (m.trigger) wave.push()
-    }
+    const
+      { name, label, value = false, indeterminate, disabled, trigger } = m,
+      [checked, setChecked] = React.useState(value),
+      onChange = (_e?: React.FormEvent<HTMLElement>, checked?: B) => {
+        wave.args[name] = checked === null ? null : !!checked
+        setChecked(!!checked)
+        m.value = !!checked
+        if (trigger) wave.push()
+      }
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    React.useEffect(() => { wave.args[m.name] = !!m.value }, [])
+    React.useEffect(() => {
+      wave.args[name] = value
+      setChecked(value)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value])
 
     return (
       <Fluent.Checkbox
-        data-test={m.name}
-        inputProps={{ 'data-test': m.name } as React.ButtonHTMLAttributes<HTMLButtonElement>}
+        data-test={name}
+        inputProps={{ 'data-test': name } as React.ButtonHTMLAttributes<HTMLButtonElement>}
         styles={{ checkmark: { display: 'flex' } }} // Fix: Center the checkmark in the checkbox.
-        label={m.label}
-        defaultIndeterminate={m.indeterminate}
-        defaultChecked={m.value}
+        label={label}
+        defaultIndeterminate={indeterminate}
+        checked={checked}
         onChange={onChange}
-        disabled={m.disabled}
+        disabled={disabled}
       />
     )
   }