add # before tag hex

lib/validations/color.ts

-export const COLOR_HEX_REGEXP = /^[A-Fa-f\d]{3,6}$/;
+export const COLOR_HEX_REGEXP = /^#[A-Fa-f\d]{3,6}$/;
 
 export const validator = (value: string | undefined) => {
   if (!value || value.length === 0) {
     return true;
   }
 
-  if (value.length !== 3 && value.length !== 6) {
+  if (value.length !== 4 && value.length !== 7) {
     return 'Invalid length';
   }
 

ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx

@@ -144,8 +144,8 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, register, errors, onAddCl
               tagType: field.type.value,
               meta: {
                 tagUrl: field.url,
-                bgColor: field.bgColor && colorValidator(field.bgColor) === true ? `#${ field.bgColor }` : undefined,
-                textColor: field.textColor && colorValidator(field.textColor) === true ? `#${ field.textColor }` : undefined,
+                bgColor: field.bgColor && colorValidator(field.bgColor) === true ? field.bgColor : undefined,
+                textColor: field.textColor && colorValidator(field.textColor) === true ? field.textColor : undefined,
                 tooltipDescription: field.tooltipDescription,
               },
               slug: 'new',

ui/publicTags/submit/fields/PublicTagsSubmitFieldTagColor.tsx

@@ -21,7 +21,7 @@ interface Props<Type extends ColorFieldTypes> {
 }
 
 const PublicTagsSubmitFieldTagColor = <Type extends ColorFieldTypes>({ isDisabled, error, fieldName, placeholder, fieldType }: Props<Type>) => {
-  const { getValues, register } = useFormContext<FormFields>();
+  const { register } = useFormContext<FormFields>();
 
   const circleBgColorDefault = {
     bgColor: useColorModeValue('gray.100', 'gray.700'),
@@ -29,23 +29,39 @@ const PublicTagsSubmitFieldTagColor = <Type extends ColorFieldTypes>({ isDisable
   };
   const isMobile = useIsMobile();
   const field = register(fieldName, { validate: colorValidator, maxLength: 6 });
-  const value = getValues(fieldName);
+  const [ value, setValue ] = React.useState('');
+
+  const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const nextValue = (() => {
+      const value = event.target.value;
+      if (value) {
+        if (value.length === 1 && value[0] !== '#') {
+          return `#${ value }`;
+        }
+      }
+      return value;
+    })();
+    setValue(nextValue);
+    field.onChange(event);
+  }, [ field ]);
 
   return (
     <FormControl variant="floating" size={{ base: 'md', lg: 'lg' }}>
       <InputGroup size={ isMobile ? 'md' : 'lg' }>
         <Input
           { ...field }
+          onChange={ handleChange }
+          value={ value }
           isInvalid={ Boolean(error) }
           isDisabled={ isDisabled }
           autoComplete="off"
-          maxLength={ 6 }
+          maxLength={ 7 }
         />
         <InputPlaceholder text={ placeholder } error={ error }/>
         <InputRightElement w="30px" h="auto" right={ 4 } top="50%" transform="translateY(-50%)" zIndex={ 10 }>
           <Circle
             size="30px"
-            bgColor={ value && colorValidator(value) === true ? `#${ value }` : circleBgColorDefault[fieldType] }
+            bgColor={ value && colorValidator(value) === true ? value : circleBgColorDefault[fieldType] }
             borderColor="gray.300"
             borderWidth="1px"
           />

ui/publicTags/submit/utils.ts

@@ -23,8 +23,8 @@ export function convertFormDataToRequestsBody(data: FormFields): Array<SubmitReq
         tagType: tag.type.value,
         description: data.description,
         meta: _pickBy({
-          bgColor: tag.bgColor ? `#${ tag.bgColor }` : undefined,
-          textColor: tag.textColor ? `#${ tag.textColor }` : undefined,
+          bgColor: tag.bgColor,
+          textColor: tag.textColor,
           tagUrl: tag.url,
           tooltipDescription: tag.tooltipDescription,
         }, Boolean),