fix: preserve empty color in ColorPreviewInput instead of coercing to black (#4856)

Author: imorland

framework/core/js/src/common/components/ColorPreviewInput.tsx

@@ -26,8 +26,10 @@ export default class ColorPreviewInput<
         attrs.onchange?.({ target: { value: attrs.value } });
       }
 
-      // Validate the color
-      if (!/^#[a-f0-9]{6}$/i.test(attrs.value)) {
+      // An empty field is a valid "no colour" state and must be preserved as
+      // such (stored as an empty string / null), not coerced to a colour. Only
+      // a non-empty value that fails validation is corrected.
+      if (attrs.value !== '' && !/^#[a-f0-9]{6}$/i.test(attrs.value)) {
         attrs.value = '#000000';
         attrs.onchange?.({ target: { value: attrs.value } });
       }

framework/core/js/tests/integration/common/components/ColorPreviewInput.test.ts

@@ -29,4 +29,28 @@ describe('ColorPreviewInput displays as expected', () => {
     input.trigger('input[type=color]', 'blur', { target: {} });
     expect(onchange).toHaveBeenCalled();
   });
+
+  it('preserves an empty value instead of coercing it to a colour', () => {
+    // Clearing the field is a valid "no colour" state and must be saved as an
+    // empty string, not turned into #000000 on blur.
+    const onchange = jest.fn();
+    const input = mq(ColorPreviewInput, { value: '', onchange });
+
+    // @ts-ignore
+    input.trigger('input[type=color]', 'blur', { target: {} });
+
+    expect(onchange).not.toHaveBeenCalledWith({ target: { value: '#000000' } });
+  });
+
+  it('keeps a deliberately-chosen black (#000000)', () => {
+    // The empty-value exemption must not stop a user setting black on purpose:
+    // #000000 is a valid colour and blur must leave it untouched.
+    const onchange = jest.fn();
+    const input = mq(ColorPreviewInput, { value: '#000000', onchange });
+
+    // @ts-ignore
+    input.trigger('input[type=color]', 'blur', { target: {} });
+
+    expect(onchange).not.toHaveBeenCalled();
+  });
 });