From bf21029a8f0b4c840c4800d9faf39eef9432ca59 Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Fri, 6 Sep 2024 12:15:33 +0200
Subject: [PATCH 1/3] fix(content-manager): pass field to CustomField input to
 have backward compatibility

---
 .../admin/src/pages/EditView/components/InputRenderer.tsx   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/core/content-manager/admin/src/pages/EditView/components/InputRenderer.tsx b/packages/core/content-manager/admin/src/pages/EditView/components/InputRenderer.tsx
index a41054bfd7..bd1f452311 100644
--- a/packages/core/content-manager/admin/src/pages/EditView/components/InputRenderer.tsx
+++ b/packages/core/content-manager/admin/src/pages/EditView/components/InputRenderer.tsx
@@ -4,6 +4,7 @@ import {
   useStrapiApp,
   useForm,
   InputRenderer as FormInputRenderer,
+  useField,
 } from '@strapi/admin/strapi-admin';
 import { useIntl } from 'react-intl';
 
@@ -63,6 +64,9 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }: InputRendererP
     edit: { components },
   } = useDocLayout();
 
+  // We pass field in case of Custom Fields to keep backward compatibility
+  const field = useField(props.name);
+
   if (!visible) {
     return null;
   }
@@ -86,7 +90,7 @@ const InputRenderer = ({ visible, hint: providedHint, ...props }: InputRendererP
 
     if (CustomInput) {
       // @ts-expect-error – TODO: fix this type error in the useLazyComponents hook.
-      return <CustomInput {...props} hint={hint} disabled={fieldIsDisabled} />;
+      return <CustomInput {...props} {...field} hint={hint} disabled={fieldIsDisabled} />;
     }
 
     return (

From 60da8cb0515a3104a1a54c0372f2424b75156a6b Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Mon, 9 Sep 2024 09:57:50 +0200
Subject: [PATCH 2/3] fix: use props on ColorPickerInput

---
 .../admin/src/components/ColorPickerInput.tsx     | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx b/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx
index 00b9893c0b..4bbb291803 100644
--- a/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx
+++ b/packages/plugins/color-picker/admin/src/components/ColorPickerInput.tsx
@@ -10,7 +10,7 @@ import {
   useComposedRefs,
 } from '@strapi/design-system';
 import { CaretDown } from '@strapi/icons';
-import { useField, type InputProps } from '@strapi/strapi/admin';
+import { useField, type InputProps, type FieldValue } from '@strapi/strapi/admin';
 import { HexColorPicker } from 'react-colorful';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
@@ -73,13 +73,16 @@ const ColorPickerPopover = styled(Popover.Content)`
   min-height: 270px;
 `;
 
-type ColorPickerInputProps = InputProps & {
-  labelAction?: React.ReactNode;
-};
+type ColorPickerInputProps = InputProps &
+  FieldValue & {
+    labelAction?: React.ReactNode;
+  };
 
 export const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(
-  ({ hint, disabled = false, labelAction, label, name, required = false }, forwardedRef) => {
-    const { onChange, value, error } = useField(name);
+  (
+    { hint, disabled = false, labelAction, label, name, required = false, onChange, value, error },
+    forwardedRef
+  ) => {
     const [showColorPicker, setShowColorPicker] = React.useState(false);
     const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);
     const { formatMessage } = useIntl();

From 26d11d39319c4aead2da927da498be5e90e1fe53 Mon Sep 17 00:00:00 2001
From: Fernando Chavez <fernando.chavez@strapi.io>
Date: Thu, 12 Sep 2024 19:13:21 +0200
Subject: [PATCH 3/3] fix: color picker test

---
 .../tests/ColorPickerInput.test.tsx           | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/plugins/color-picker/admin/src/components/tests/ColorPickerInput.test.tsx b/packages/plugins/color-picker/admin/src/components/tests/ColorPickerInput.test.tsx
index 4e13011b5a..3e8fa1829b 100644
--- a/packages/plugins/color-picker/admin/src/components/tests/ColorPickerInput.test.tsx
+++ b/packages/plugins/color-picker/admin/src/components/tests/ColorPickerInput.test.tsx
@@ -7,20 +7,30 @@ import { IntlProvider } from 'react-intl';
 import { ColorPickerInput } from '../ColorPickerInput';
 
 const render = () => ({
-  ...renderRTL(<ColorPickerInput name="color" label={'color-picker'} type="string" />, {
-    wrapper: ({ children }) => {
-      const locale = 'en';
-      return (
-        <IntlProvider locale={locale} messages={{}} textComponent="span">
-          <DesignSystemProvider locale={locale}>
-            <Form onSubmit={jest.fn()} method="POST">
-              {children}
-            </Form>
-          </DesignSystemProvider>
-        </IntlProvider>
-      );
-    },
-  }),
+  ...renderRTL(
+    <ColorPickerInput
+      name="color"
+      label={'color-picker'}
+      type="string"
+      initialValue=""
+      value=""
+      onChange={() => {}}
+    />,
+    {
+      wrapper: ({ children }) => {
+        const locale = 'en';
+        return (
+          <IntlProvider locale={locale} messages={{}} textComponent="span">
+            <DesignSystemProvider locale={locale}>
+              <Form onSubmit={jest.fn()} method="POST">
+                {children}
+              </Form>
+            </DesignSystemProvider>
+          </IntlProvider>
+        );
+      },
+    }
+  ),
   user: userEvent.setup(),
 });