Move custom field input to GenericInput

packages/core/admin/admin/src/content-manager/components/Inputs/index.js

@@ -218,52 +218,22 @@ function Inputs({
     );
   }
 
-  if (customFieldUid) {
-    const customField = customFieldsRegistry.get(customFieldUid);
-
-    const CustomFieldInput = React.lazy(customField.components.Input);
-
-    return (
-      <Suspense fallback="loading...">
-        <CustomFieldInput
-          attribute={fieldSchema}
-          autoComplete="new-password"
-          intlLabel={{ id: label, defaultMessage: label }}
-          // in case the default value of the boolean is null, attribute.default doesn't exist
-          isNullable={inputType === 'bool' && [null, undefined].includes(fieldSchema.default)}
-          description={description ? { id: description, defaultMessage: description } : null}
-          disabled={shouldDisableField}
-          error={error}
-          labelAction={labelAction}
-          contentTypeUID={currentContentTypeLayout.uid}
-          customFieldUid={customFieldUid}
-          customInputs={{
+  const customInputs = {
     json: InputJSON,
     uid: InputUID,
     media: fields.media,
     wysiwyg: Wysiwyg,
     ...fields,
-          }}
-          multiple={fieldSchema.multiple || false}
-          name={keys}
-          onChange={args => {
-            console.log('on change', args);
-            onChange(args);
-          }}
-          options={options}
-          placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
-          required={fieldSchema.required || false}
-          step={step}
-          type={inputType}
-          // validations={validations}
-          value={inputValue}
-          withDefaultValue={false}
-        />
-      </Suspense>
-    );
+  };
+
+  if (customFieldUid) {
+    const customField = customFieldsRegistry.get(customFieldUid);
+    const CustomFieldInput = React.lazy(customField.components.Input);
+    customInputs[customFieldUid] = CustomFieldInput;
   }
 
   return (
+    <Suspense fallback="loading...">
       <GenericInput
         attribute={fieldSchema}
         autoComplete="new-password"
@@ -276,13 +246,7 @@ function Inputs({
         labelAction={labelAction}
         contentTypeUID={currentContentTypeLayout.uid}
         customFieldUid={customFieldUid}
-      customInputs={{
-        json: InputJSON,
-        uid: InputUID,
-        media: fields.media,
-        wysiwyg: Wysiwyg,
-        ...fields,
-      }}
+        customInputs={customInputs}
         multiple={fieldSchema.multiple || false}
         name={keys}
         onChange={onChange}
@@ -295,6 +259,7 @@ function Inputs({
         value={inputValue}
         withDefaultValue={false}
       />
+    </Suspense>
   );
 }
 

packages/core/helper-plugin/lib/src/components/GenericInput/index.js

@@ -25,6 +25,7 @@ import NotSupported from './NotSupported';
 
 const GenericInput = ({
   autoComplete,
+  customFieldUid,
   customInputs,
   description,
   disabled,
@@ -45,7 +46,11 @@ const GenericInput = ({
   const { formatMessage } = useIntl();
   const [showPassword, setShowPassword] = useState(false);
 
-  const CustomInput = customInputs ? customInputs[type] : null;
+  let CustomInput = null;
+
+  if (customInputs) {
+    CustomInput = customInputs[customFieldUid || type];
+  }
 
   // the API always returns null, which throws an error in React,
   // therefore we cast this case to undefined
@@ -437,6 +442,7 @@ const GenericInput = ({
 GenericInput.defaultProps = {
   autoComplete: undefined,
   customInputs: null,
+  customFieldUid: null,
   description: null,
   disabled: false,
   error: '',
@@ -452,6 +458,7 @@ GenericInput.defaultProps = {
 GenericInput.propTypes = {
   autoComplete: PropTypes.string,
   customInputs: PropTypes.object,
+  customFieldUid: PropTypes.string,
   description: PropTypes.shape({
     id: PropTypes.string.isRequired,
     defaultMessage: PropTypes.string.isRequired,