diff --git a/src/components/@shared/FormFields/ContainerInput/index.tsx b/src/components/@shared/FormFields/ContainerInput/index.tsx index cf50833f3..379d66cc3 100644 --- a/src/components/@shared/FormFields/ContainerInput/index.tsx +++ b/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() const [isLoading, setIsLoading] = useState(false) const [isValid, setIsValid] = useState(false) const [checked, setChecked] = useState(false) - const { values, setFieldError, setFieldValue } = - useFormikContext() 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 ( diff --git a/src/components/Publish/Metadata/index.tsx b/src/components/Publish/Metadata/index.tsx index b2125efdf..775246ab9 100644 --- a/src/components/Publish/Metadata/index.tsx +++ b/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() + 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 + } />