made autocomplete popup

src/components/tags/Tag/index.tsx

@@ -1,5 +1,4 @@
-import React, { FC, FocusEventHandler, useCallback, } from 'react';
+import React, { FC, FocusEventHandler, useCallback } from 'react';
-import * as styles from './styles.scss';
 import { ITag } from '~/redux/types';
 import { TagWrapper } from '~/components/tags/TagWrapper';
 
@@ -27,16 +26,14 @@ const Tag: FC<IProps> = ({ tag, is_hoverable, is_editing, size = 'normal', onBlu
   }, [tag, onClick]);
 
   return (
-    <div className={styles.wrap}>
+    <TagWrapper
-      <TagWrapper
+      feature={getTagFeature(tag)}
-        feature={getTagFeature(tag)}
+      size={size}
-        size={size}
+      is_hoverable={is_hoverable}
-        is_hoverable={is_hoverable}
+      is_editing={is_editing}
-        is_editing={is_editing}
+      onClick={onClick && onClickHandler}
-        onClick={onClick && onClickHandler}
+      title={tag.title}
-        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,22 +100,23 @@ const TagInput: FC<IProps> = ({ onAppend, onClearTag, onSubmit }) => {
   const feature = useMemo(() => (input.substr(0, 1) === '/' ? 'green' : ''), [input]);
 
   return (
-    <TagWrapper title={input || placeholder} has_input={true} feature={feature}>
+    <div className={styles.wrap}>
-      {onInput && <TagAutocomplete />}
+      {onInput && focused && <TagAutocomplete />}
-
+      <TagWrapper title={input || placeholder} has_input={true} feature={feature}>
-      <input
+        <input
-        type="text"
+          type="text"
-        value={input}
+          value={input}
-        size={1}
+          size={1}
-        placeholder={placeholder}
+          placeholder={placeholder}
-        maxLength={24}
+          maxLength={24}
-        onChange={onInput}
+          onChange={onInput}
-        onKeyUp={onKeyUp}
+          onKeyUp={onKeyUp}
-        onBlur={onBlur}
+          onBlur={onBlur}
-        onFocus={onFocus}
+          onFocus={onFocus}
-        ref={ref}
+          ref={ref}
-      />
+        />
-    </TagWrapper>
+      </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';