fix tag input on firefox, do refactor on it

src/components/tags/TagWrapper/index.tsx

@@ -7,30 +7,30 @@ import { Icon } from '~/components/input/Icon';
 import styles from './styles.module.scss';
 
 interface IProps {
+  className?: string;
   size?: string;
   color?: 'primary' | 'danger' | 'info' | 'black' | 'default';
   deletable?: boolean;
   hoverable?: boolean;
   editing?: boolean;
-  hasInput?: boolean;
   onClick?: () => void;
   onDelete?: () => void;
   title?: string;
 }
 
 const TagWrapper: FC<IProps> = ({
+  className,
   color = 'default',
   children,
   size,
   deletable,
   hoverable,
   editing,
-  hasInput,
   onClick,
   onDelete,
   title = '',
 }) => {
-  const canBeDeleted = deletable && !editing && !hasInput;
+  const canBeDeleted = deletable && !editing;
   const onDeletePress = useCallback(
     (event) => {
       if (!onDelete) {
@@ -53,9 +53,9 @@ const TagWrapper: FC<IProps> = ({
           [styles.hoverable]: hoverable,
           [styles.editing]: editing,
           [styles.deletable]: canBeDeleted,
-          [styles.input]: hasInput,
           [styles.clickable]: onClick,
         },
+        className,
       )}
       onClick={onClick}
     >

src/components/tags/TagWrapper/styles.module.scss

@@ -34,11 +34,6 @@ $big: 1.2;
     background-color: $content_bg;
   }
 
-  &.input {
-    color: transparent !important;
-    min-width: 100px;
-  }
-
   &.clickable {
     cursor: pointer;
   }
@@ -76,26 +71,6 @@ $big: 1.2;
       height: $tag_height * $big;
     }
   }
-
-  input {
-    background: none;
-    border: none;
-    color: white;
-    outline: none;
-    display: inline-flex;
-    position: absolute;
-    font: inherit;
-
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    min-width: 100px;
-    padding-left: $tag_height;
-    padding-right: 5px;
-    box-sizing: border-box;
-  }
 }
 
 .hole {