make form error display kinda work

src/components/@shared/Form/FormFields/URLInput/Input.tsx

@@ -22,6 +22,7 @@ export default function URLInput({
       <input
         className={styles.input}
         {...props}
+        {...field}
         type="url"
         onBlur={(e: React.SyntheticEvent) => handleButtonClick(e, field.value)}
       />

src/components/@shared/Form/Input/InputElement.tsx

@@ -154,6 +154,7 @@ export default function InputElement({
             type={type || 'text'}
             size={size}
             disabled={disabled}
+            {...field}
             {...props}
           />
           {postfix && (
@@ -166,6 +167,7 @@ export default function InputElement({
           type={type || 'text'}
           size={size}
           disabled={disabled}
+          {...field}
           {...props}
         />
       )

src/components/@shared/Form/Input/index.tsx

@@ -10,11 +10,13 @@ import React, {
 import InputElement from './InputElement'
 import Label from './Label'
 import styles from './index.module.css'
-import { ErrorMessage, FieldInputProps } from 'formik'
+import { ErrorMessage, FieldInputProps, FieldMetaProps, useField } from 'formik'
 import classNames from 'classnames/bind'
 import Disclaimer from './Disclaimer'
 import Tooltip from '@shared/atoms/Tooltip'
 import Markdown from '@shared/Markdown'
+import MetadataFields from 'src/components/Publish/FormPublish/Metadata'
+import toPath from 'lodash/toPath'
 
 const cx = classNames.bind(styles)
 
@@ -70,40 +72,53 @@ export default function Input(props: Partial<InputProps>): ReactElement {
     help,
     additionalComponent,
     size,
+    form,
     field,
     disclaimer,
     disclaimerValues
   } = props
 
-  const hasError =
+  const isFormikField = typeof field !== 'undefined'
-    props.form?.touched[field.name] && props.form?.errors[field.name]
+  const isNestedField = field?.name?.includes('.')
+
+  // TODO: this feels hacky as it assumes nested `values` store. But we can't use the
+  // `useField()` hook in here to get `meta.error` so we have to match against form?.errors?
+  // handling flat and nested data at same time.
+  const parsedFieldName =
+    isFormikField && (isNestedField ? field?.name.split('.') : [field?.name])
+  // const hasFormikError = !!meta?.touched && !!meta?.error
+  const hasFormikError =
+    form?.errors !== {} &&
+    form?.touched?.[parsedFieldName[0]]?.[parsedFieldName[1]] &&
+    form?.errors?.[parsedFieldName[0]]?.[parsedFieldName[1]]
 
   const styleClasses = cx({
     field: true,
-    hasError: hasError
+    hasError: hasFormikError
   })
 
   const [disclaimerVisible, setDisclaimerVisible] = useState(true)
 
   useEffect(() => {
+    if (!isFormikField) return
+
     if (disclaimer && disclaimerValues) {
       setDisclaimerVisible(
-        disclaimerValues.includes(props.form?.values[field.name])
+        disclaimerValues.includes(
+          props.form?.values[parsedFieldName[0]]?.[parsedFieldName[1]]
+        )
       )
     }
-  }, [props.form?.values[field.name]])
+  }, [isFormikField, props.form?.values])
 
   return (
-    <div
+    <div className={styleClasses}>
-      className={styleClasses}
-      data-is-submitting={props.form?.isSubmitting ? true : null}
-    >
       <Label htmlFor={props.name} required={props.required}>
         {label} {help && <Tooltip content={<Markdown text={help} />} />}
       </Label>
       <InputElement size={size} {...field} {...props} />
 
-      {field && hasError && (
+      {isFormikField && hasFormikError && (
         <div className={styles.error}>
           <ErrorMessage name={field.name} />
         </div>

src/components/Publish/FormPublish/Services/index.tsx

@@ -68,11 +68,6 @@ export default function ServicesFields(): ReactElement {
         component={Input}
         name="services[0].links"
       />
-      <Field
-        {...getFieldContent('links', content.services.fields)}
-        component={Input}
-        name="services[0].links"
-      />
       <Field
         {...getFieldContent('access', content.services.fields)}
         component={Input}