Color Picker Input | Fix warning and clear value (#165)

FIX 1: usual MUI warning when value is not defined

if value is undefined

Fix the warning: A component is changing an uncontrolled input to be
controlled. This is likely caused by the value changing from undefined
to a defined value, which should not happen. Decide between using a
controlled or uncontrolled input element for the lifetime of the
component.

if value is null

`value` prop on `input` should not be null. Consider using an empty
string to clear the component or `undefined` for uncontrolled
components.


FIX 2: color picker couldn't be cleared if value was already present
(field.value not consistent with current watched value)

Author: Michele-Masciave

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- `ColorPicker` controlled/uncontrolled state warning by ensuring value prop is always defined.
+- `ColorPicker` clear value when field value is already set.
+
 ## [4.1.0] - 2026-03-16
 
 ### Added

src/lib/components/ColorPicker/ColorPicker.tsx

@@ -47,6 +47,7 @@ const ColorPicker = <T extends FieldValues>(props: ColorPickerInputProps<T>) =>
     disabled: formDisabled,
     getFieldState,
     setValue,
+    watch,
     requiredFields,
     formState: { errors },
     hideValidationMessages,
@@ -65,7 +66,8 @@ const ColorPicker = <T extends FieldValues>(props: ColorPickerInputProps<T>) =>
   });
 
   const isDisabled = formDisabled || disabled;
-  const color = useMemo(() => new TinyColor(field.value), [field.value]);
+  const fieldValue = watch(name) as string | undefined;
+  const color = useMemo(() => new TinyColor(fieldValue), [fieldValue]);
   const fieldError = get(errors, name) as FieldError | undefined;
   const hideErrorMessage = useMemo(() => hideValidationMessages || hideValidationMessage, [hideValidationMessages, hideValidationMessage]);
   const hasError = useMemo(() => !!fieldError, [fieldError]);
@@ -107,7 +109,7 @@ const ColorPicker = <T extends FieldValues>(props: ColorPickerInputProps<T>) =>
 
               field.onBlur();
             }}
-            value={field.value}
+            value={fieldValue ?? ""}
             slotProps={{
               input: {
                 startAdornment: (