made autocomplete popup

src/components/tags/Tag/index.tsx

@@ -1,5 +1,4 @@
-import React, { FC, FocusEventHandler, useCallback, } from 'react';
-import * as styles from './styles.scss';
+import React, { FC, FocusEventHandler, useCallback } from 'react';
 import { ITag } from '~/redux/types';
 import { TagWrapper } from '~/components/tags/TagWrapper';
 
@@ -27,7 +26,6 @@ const Tag: FC<IProps> = ({ tag, is_hoverable, is_editing, size = 'normal', onBlu
   }, [tag, onClick]);
 
   return (
-    <div className={styles.wrap}>
     <TagWrapper
       feature={getTagFeature(tag)}
       size={size}
@@ -36,7 +34,6 @@ const Tag: FC<IProps> = ({ tag, is_hoverable, is_editing, size = 'normal', onBlu
       onClick={onClick && onClickHandler}
       title={tag.title}
     />
-    </div>
   );
 };
 

src/components/tags/Tag/styles.scss

@@ -1,4 +0,0 @@
-.wrap {
-  background-color: blue;
-  position: relative;
-}

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

@@ -1,11 +1,20 @@
+@keyframes appear {
+  0% { opacity: 0 }
+  100% { opacity: 100 }
+}
+
 .window {
-  display: none;
+  box-shadow: transparentize(black, 0.5) 4px 4px 4px, inset transparentize(white, 0.95) 1px 1px;
+
   position: absolute;
   top: 0;
   right: 0;
   width: calc(90vw - 20px);
   max-width: 300px;
-  background: red;
+  background: lighten($content_bg, 4%);
   height: 100px;
-  z-index: -1;
+  z-index: 10;
+  border-radius: 3px;
+  padding-top: $tag_height;
+  animation: appear 0.25s forwards;
 }

src/components/tags/TagInput/index.tsx

@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 import { TagAutocomplete } from '~/components/tags/TagAutocomplete';
 import { TagWrapper } from '~/components/tags/TagWrapper';
+import styles from './styles.module.scss';
 
 const placeholder = 'Добавить';
 
@@ -99,9 +100,9 @@ const TagInput: FC<IProps> = ({ onAppend, onClearTag, onSubmit }) => {
   const feature = useMemo(() => (input.substr(0, 1) === '/' ? 'green' : ''), [input]);
 
   return (
+    <div className={styles.wrap}>
+      {onInput && focused && <TagAutocomplete />}
       <TagWrapper title={input || placeholder} has_input={true} feature={feature}>
-      {onInput && <TagAutocomplete />}
-
         <input
           type="text"
           value={input}
@@ -115,6 +116,7 @@ const TagInput: FC<IProps> = ({ onAppend, onClearTag, onSubmit }) => {
           ref={ref}
         />
       </TagWrapper>
+    </div>
   );
 };
 

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

@@ -0,0 +1,4 @@
+.wrap {
+  position: relative;
+  z-index: 13;
+}

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

@@ -16,7 +16,7 @@ $big: 1.2;
   padding: 0 8px 0 0;
   //margin: 0 $gap $gap 0;
   position: relative;
-  z-index: 4;
+  z-index: 12;
 
   &:global(.big) {
     height: $tag_height * $big;

src/components/tags/Tags/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes, useCallback, useEffect, useMemo, useState, } from 'react';
+import React, { FC, HTMLAttributes, useCallback, useEffect, useMemo, useState } from 'react';
 import { TagField } from '~/components/containers/TagField';
 import { ITag } from '~/redux/types';
 import uniq from 'ramda/es/uniq';