Color issue

src/components/UI/ColorPicker/ColorPicker.module.css

@@ -19,15 +19,15 @@
 }
 
 .PickerPanel {
-  left: 20px;
+  left: 60px;
   z-index: 1;
+  bottom: 85px;
 }
 
 .Container {
-  margin-left: 10px;
-  height: 100px;
+  padding: 10px;
 }
 
-.HelperText {
-  margin-left: 10px !important;
+.ContainListener {
+  height: inherit;
 }

src/components/UI/ColorPicker/ColorPicker.test.tsx

@@ -5,9 +5,9 @@ import { ColorPicker } from './ColorPicker';
 
 describe('<ColorPicker />', () => {
   const props = {
+    name: 'colorCode',
     colorCode: '#0C976D',
     helperText: 'Tag color',
-    field: { name: 'example', value: null },
   };
 
   const wrapper = shallow(<ColorPicker {...props} />);

src/components/UI/ColorPicker/ColorPicker.tsx

@@ -1,62 +1,62 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './ColorPicker.module.css';
 import { TwitterPicker } from 'react-color';
-import { Input } from '../Form/Input/Input';
+import { Input } from '@material-ui/core';
 import FormHelperText from '@material-ui/core/FormHelperText/FormHelperText';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 
 export interface Props {
-  handleChange?: any;
   colorCode: string;
-  field?: any;
+  name: string;
   form?: any;
   helperText: string;
 }
 
 export const ColorPicker: React.SFC<Props> = ({ ...props }) => {
   const [displayPicker, setDisplayPicker] = useState(false);
-  let colorCode = props.colorCode ? props.colorCode : '#0C976D';
-  props.field.value = colorCode;
+  const [colorCode, setColorCode] = useState('');
 
-  const handleChangeComplete = (color: any, event: any) => {
-    colorCode = color.hex;
-    props.handleChange(colorCode);
+  useEffect(() => {
+    setColorCode(props.colorCode);
+  }, [props.colorCode]);
+
+  const handleChangeComplete = (color: any) => {
+    setColorCode(color.hex);
+    props.form.values.colorCode = color.hex;
   };
 
-  const handleClick = () => {
-    setDisplayPicker(!displayPicker);
+  const onClickAway = () => {
+    setDisplayPicker(false);
   };
 
   return (
     <div className={styles.Container}>
       <div className={styles.ColorPicker} data-testid="ColorPicker">
         <div className={styles.ColorInput}>
-          <Input
-            type="text"
-            placeholder="Select color"
-            field={props.field}
-            form={props.form}
-            label=""
-            rows={0}
-          ></Input>
+          <Input type="text" placeholder="Select color" name={props.name} value={colorCode}></Input>
         </div>
-        <div
-          className={styles.ChooseColor}
-          style={{
-            backgroundColor: colorCode,
-          }}
-          onClick={handleClick}
-        ></div>
-        {displayPicker ? (
-          <TwitterPicker
-            className={styles.PickerPanel}
-            triangle={'hide'}
-            onChangeComplete={handleChangeComplete}
-          />
-        ) : null}
+        <ClickAwayListener onClickAway={onClickAway}>
+          <div className={styles.ContainListener}>
+            <div
+              className={styles.ChooseColor}
+              style={{
+                backgroundColor: colorCode,
+              }}
+              onClick={() => setDisplayPicker(!displayPicker)}
+            ></div>
+            {props.helperText ? (
+              <FormHelperText className={styles.HelperText}>{props.helperText}</FormHelperText>
+            ) : null}
+            {displayPicker ? (
+              <TwitterPicker
+                className={styles.PickerPanel}
+                triangle={'hide'}
+                onChangeComplete={handleChangeComplete}
+              />
+            ) : null}
+          </div>
+        </ClickAwayListener>
       </div>
-      {props.helperText ? (
-        <FormHelperText className={styles.HelperText}>{props.helperText}</FormHelperText>
-      ) : null}
     </div>
   );
 };

src/containers/Tag/Tag.tsx

@@ -55,15 +55,14 @@ export const Tag: React.SFC<TagProps> = ({ match }) => {
   if (!data) return <Loading />;
 
   let tags = [];
-  // remove the self tag from list
-  if (data && match && match.params.id) {
-    tags = data.tags.filter((tag: any) => tag.id !== match.params.id);
+  if (data) {
+    tags = data.tags;
+    // remove the self tag from list
+    if (data && match && match.params.id) {
+      tags = data.tags.filter((tag: any) => tag.id !== match.params.id);
+    }
   }
 
-  const getColorCode = (code: string) => {
-    setColorcode(code);
-  };
-
   const getObject = (arr: any, data: any) => {
     if (arr && data) {
       let result: any = [];
@@ -114,9 +113,9 @@ export const Tag: React.SFC<TagProps> = ({ match }) => {
     },
     {
       component: ColorPicker,
+      name: 'colorCode',
       colorCode: colorCode,
       helperText: 'Tag color',
-      handleChange: getColorCode,
     },
   ];