Merge pull request #21163 from strapi/fix/custom-fields-backward-compatibility

fix(content-manager): pass field to CustomField input to have backward compatibility

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 (

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();

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(),
 });