Fix form label ordering issue (#134)

src/components/forms/DynamicMetadataFields.tsx

@@ -1,4 +1,4 @@
-import { FormControl, FormErrorMessage, FormHelperText } from '@chakra-ui/react'
+import { FormControl, FormErrorMessage } from '@chakra-ui/react'
 import { Control, FieldErrors, FieldValues, Path } from 'react-hook-form'
 import { FieldType } from '@/interfaces/Metadata'
 import { formatFieldLabel } from '@/utils/metadataUtils'
@@ -92,11 +92,6 @@ export const DynamicMetadataFields = <T extends FieldValues>({
 
   return (
     <FormControl isInvalid={!!errors[fieldKey]} mb={4} isRequired={isRequired}>
-      {fieldType === FieldType.MULTI_SELECT && (
-        <FormHelperText mb={2}>
-          You are able to search and can select multiple options
-        </FormHelperText>
-      )}
       {renderField()}
       <FormErrorMessage>
         {errors[fieldKey] && `${fieldKey} is required`}

src/components/forms/fields/SelectField.tsx

@@ -8,7 +8,12 @@ import {
 import { Select as CRSelect } from 'chakra-react-select'
 import { chakraStylesSelect } from '@/styles/chakra'
 import { generateSelectOptions } from '@/utils/metadataUtils'
-import { FormControl, FormLabel, FormErrorMessage } from '@chakra-ui/react'
+import {
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  FormHelperText,
+} from '@chakra-ui/react'
 import { IChakraSelect } from '@/interfaces'
 
 type TProps<T extends FieldValues> = {
@@ -62,6 +67,11 @@ export const SelectField = <T extends FieldValues>({
       render={({ field, fieldState: { error } }) => (
         <FormControl isInvalid={!!error} isRequired={isRequired}>
           {label && <FormLabel>{label}</FormLabel>}
+          {isMulti && (
+            <FormHelperText mb={2}>
+              You are able to search and can select multiple options
+            </FormHelperText>
+          )}
           <CRSelect
             chakraStyles={chakraStylesSelect}
             isClearable={isClearable}