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 {

src/containers/tags/TagInput/index.tsx

@@ -130,10 +130,12 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
     <div className={styles.wrap} ref={wrapper}>
       <TagWrapper
         title={input || placeholder}
-        hasInput={true}
         color={isAlbumTag ? 'primary' : undefined}
+        deletable={false}
+        className={styles.tag}
       >
         <input
+          className={styles.input}
           type="text"
           value={input}
           size={1}

src/containers/tags/TagInput/styles.module.scss

@@ -1,6 +1,32 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   position: relative;
   z-index: 20;
 }
+
+.tag {
+  color: transparent !important;
+  min-width: 100px;
+}
+
+.input {
+  background: none;
+  border: none;
+  color: white;
+  outline: none;
+  display: inline-flex;
+  position: absolute;
+  font: inherit;
+
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  min-width: 100px;
+  padding-left: $tag_height;
+  padding-right: 5px;
+  box-sizing: border-box;
+}