diff --git a/ui/src/color_picker.test.tsx b/ui/src/color_picker.test.tsx
index 51d9cca01cb..9e389bf3a3b 100644
--- a/ui/src/color_picker.test.tsx
+++ b/ui/src/color_picker.test.tsx
@@ -58,6 +58,44 @@ describe('ColorPicker.tsx', () => {
expect(wave.args[name]).toBe('#DDD')
})
+ it('Set args when value is updated to different value', () => {
+ const { rerender } = render()
+ expect(wave.args[name]).toBeFalsy()
+ rerender()
+
+ expect(wave.args[name]).toBe('blue')
+ })
+
+ it('Set args when value is updated to initial value', () => {
+ const { container, rerender } = render()
+ expect(wave.args[name]).toBe('blue')
+
+ fireEvent.input(container.querySelectorAll('input')[0]!, { target: { value: 'dddddd' } })
+ expect(wave.args[name]).toBe('#dddddd')
+
+ rerender()
+ expect(wave.args[name]).toBe('blue')
+ })
+
+ it('Set args when value is updated to different value - Inline picker', () => {
+ const { rerender } = render()
+ expect(wave.args[name]).toBeFalsy()
+ rerender()
+
+ expect(wave.args[name]).toBe('#DDD')
+ })
+
+ it('Set args when value is updated to initial value - Inline picker', () => {
+ const { container, rerender } = render()
+ expect(wave.args[name]).toBe('#AAA')
+
+ fireEvent.input(container.querySelectorAll('input')[0]!, { target: { value: '#BBB' } })
+ expect(wave.args[name]).toBe('#BBB')
+
+ rerender()
+ expect(wave.args[name]).toBe('#AAA')
+ })
+
it('Calls sync when trigger is specified', () => {
const { container } = render()
// Changing alpha in order to trigger component's onChange.
@@ -91,5 +129,35 @@ describe('ColorPicker.tsx', () => {
expect(pushMock).not.toBeCalled()
})
+
+ it('Update choices', () => {
+ const { rerender, getAllByRole } = render()
+ expect(getAllByRole('radio')[0]).toHaveProperty('title', 'yellow')
+ expect(getAllByRole('radio')[1]).toHaveProperty('title', 'red')
+ expect(getAllByRole('radio')[2]).toHaveProperty('title', 'blue')
+ rerender()
+
+ expect(getAllByRole('radio')[0]).toHaveProperty('title', 'yellow')
+ expect(getAllByRole('radio')[1]).toHaveProperty('title', 'orange')
+ })
+
+ it('Set args when value is updated to different value - Swatch picker', () => {
+ const { rerender } = render()
+ expect(wave.args[name]).toBe('#AAA')
+ rerender()
+
+ expect(wave.args[name]).toBe('#BBB')
+ })
+
+ it('Set args when value is updated to initial value - Swatch picker', () => {
+ const { rerender, getAllByRole } = render()
+ expect(wave.args[name]).toBe('#AAA')
+
+ fireEvent.click(getAllByRole('radio')[1])
+ expect(wave.args[name]).toBe('#BBB')
+
+ rerender()
+ expect(wave.args[name]).toBe('#AAA')
+ })
})
})
\ No newline at end of file
diff --git a/ui/src/color_picker.tsx b/ui/src/color_picker.tsx
index 8ae246ef3cf..56b3eb29ef1 100644
--- a/ui/src/color_picker.tsx
+++ b/ui/src/color_picker.tsx
@@ -87,6 +87,15 @@ const
onChange(null, color)
}
+ React.useEffect(() => {
+ const color = Fluent.getColorFromString(val)
+ if (color) {
+ setColor(color)
+ setColorText(color.str)
+ }
+ wave.args[model.name] = val
+ }, [model.name, model.value, val])
+
return (
{model.label &&
{model.label}}
@@ -111,18 +120,19 @@ export const
[selectedColorId, setSelectedColorId] = React.useState
(defaultValue),
onSwatchChange = (_e: React.FormEvent, _id?: S, color = defaultValue) => {
wave.args[name] = color
+ model.value = color || undefined
setSelectedColorId(color)
if (trigger) wave.push()
},
- onChange = (_e: React.SyntheticEvent, { str }: Fluent.IColor) => {
- wave.args[name] = str || defaultValue
- if (trigger) wave.push()
- },
+ onChange = (e: React.SyntheticEvent, { str }: Fluent.IColor) => onSwatchChange(e, undefined, str),
normalizedWidth = formItemWidth(width),
minMaxWidth = !normalizedWidth?.includes('%') ? `calc(${normalizedWidth} - 35px)` : 'initial'
- // eslint-disable-next-line react-hooks/exhaustive-deps
- React.useEffect(() => { wave.args[name] = defaultValue }, [])
+
+ React.useEffect(() => {
+ wave.args[name] = defaultValue
+ setSelectedColorId(defaultValue)
+ }, [defaultValue, name])
return (
@@ -138,7 +148,7 @@ export const
: (