disable checksum imput when fetched

src/components/@shared/FormFields/ContainerInput/index.tsx

@@ -8,12 +8,16 @@ import ImageInfo from './Info'
 import { getContainerChecksum } from '@utils/docker'
 
 export default function ContainerInput(props: InputProps): ReactElement {
-  const [field, meta, helpers] = useField(props.name)
+  const [field] = useField(props.name)
+  const [fieldChecksum, metaChecksum, helpersChecksum] = useField(
+    'metadata.dockerImageCustomChecksum'
+  )
+
+  const { values, setFieldError, setFieldValue } =
+    useFormikContext<FormPublishData>()
   const [isLoading, setIsLoading] = useState(false)
   const [isValid, setIsValid] = useState(false)
   const [checked, setChecked] = useState(false)
-  const { values, setFieldError, setFieldValue } =
-    useFormikContext<FormPublishData>()
 
   async function handleValidation(e: React.SyntheticEvent, container: string) {
     e.preventDefault()
@@ -28,6 +32,7 @@ export default function ContainerInput(props: InputProps): ReactElement {
       const checksum = await getContainerChecksum(imageNname, tag)
       if (checksum) {
         setFieldValue('metadata.dockerImageCustomChecksum', checksum)
+        helpersChecksum.setTouched(false)
         setIsValid(true)
       }
       setChecked(true)
@@ -45,7 +50,7 @@ export default function ContainerInput(props: InputProps): ReactElement {
     setFieldValue('metadata.dockerImageCustomChecksum', '')
     setChecked(false)
     setIsValid(false)
-    helpers.setTouched(false)
+    helpersChecksum.setTouched(true)
   }
 
   return (

src/components/Publish/Metadata/index.tsx

@@ -1,6 +1,6 @@
 import { BoxSelectionOption } from '@shared/FormFields/BoxSelection'
 import Input from '@shared/FormInput'
-import { Field, useFormikContext } from 'formik'
+import { Field, useField, useFormikContext } from 'formik'
 import React, { ReactElement, useEffect } from 'react'
 import content from '../../../../content/publish/form.json'
 import { FormPublishData } from '../_types'
@@ -23,6 +23,8 @@ export default function MetadataFields(): ReactElement {
   // connect with Form state, use for conditional field rendering
   const { values, setFieldValue } = useFormikContext<FormPublishData>()
 
+  const [field, meta] = useField('metadata.dockerImageCustomChecksum')
+
   // BoxSelection component is not a Formik component
   // so we need to handle checked state manually.
   const assetTypeOptions: BoxSelectionOption[] = [
@@ -129,6 +131,9 @@ export default function MetadataFields(): ReactElement {
                 )}
                 component={Input}
                 name="metadata.dockerImageCustomChecksum"
+                disabled={
+                  values.metadata.dockerImageCustomChecksum && !meta.touched
+                }
               />
               <Field
                 {...getFieldContent(