fixed tag autocomplete style

src/components/menu/MenuButton/styles.module.scss

@@ -1,10 +1,10 @@
+@import "src/styles/variables.scss";
+
 .menu {
   position: relative;
   cursor: pointer;
 }
 
-@import "src/styles/variables.scss";
-
 .popper {
   @include outer_shadow;
 
@@ -32,32 +32,5 @@
 }
 
 .arrow {
-  width: 0;
+  @include popper_arrow;
-  height: 0;
-  border-style: solid;
-  position: absolute;
-
-  [data-popper-placement*='bottom'] & {
-    border-width: 0 10px 10px 10px;
-    border-color: transparent transparent lighten($menu_bg, 6%) transparent;
-    top: -10px;
-  }
-
-  [data-popper-placement*='top'] & {
-    border-width: 10px 10px 0 10px;
-    border-color: lighten($menu_bg, 6%) transparent transparent transparent;
-    bottom: -10px;
-  }
-
-  [data-popper-placement*='right'] & {
-    border-width: 10px 10px 10px 0;
-    border-color: transparent lighten($menu_bg, 6%) transparent transparent;
-    left: -10px;
-  }
-
-  [data-popper-placement*='left'] & {
-    border-width: 10px 0 10px 10px;
-    border-color: transparent transparent transparent lighten($menu_bg, 6%);
-    right: -10px;
-  }
 }

src/components/tags/TagAutocomplete/index.tsx

@@ -35,15 +35,17 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
   );
   const scroll = useRef<HTMLDivElement>(null);
   const wrapper = useRef<HTMLDivElement>(null);
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
 
   const pop = usePopper(wrapper?.current?.parentElement, wrapper.current, {
     placement: 'bottom-end',
     strategy: 'fixed',
     modifiers: [
+      { name: 'arrow', options: { element: arrowElement } },
       {
         name: 'offset',
         options: {
-          offset: [0, 4],
+          offset: [0, 10],
         },
       },
     ],
@@ -93,6 +95,7 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
       style={pop.styles.popper}
       {...pop.attributes.popper}
     >
+      <div style={pop.styles.arrow} ref={setArrowElement} className={styles.arrow} />
       <div className={styles.scroll} ref={scroll}>
         <TagAutocompleteRow
           selected={selected === -1}

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

@@ -8,7 +8,9 @@
 $row_height: 24px;
 
 .window {
-  box-shadow: transparentize(white, 0.9) 0 0 0 1px;
+  @include outer_shadow;
+  @include blur;
+
   position: absolute;
   top: -2px;
   right: -2px;
@@ -19,14 +21,22 @@ $row_height: 24px;
   border-radius: 4px;
   animation: appear 0.25s forwards;
   visibility: hidden;
+  pointer-events: none;
+  touch-action: none;
 
   &.visible {
     visibility: visible;
+    pointer-events: all;
+    touch-action: initial;
   }
 }
 
 .scroll {
   overflow: hidden;
-  padding: 0 0 $gap * 0.5;
+  padding: 0;
   border-radius: 4px;
 }
+
+.arrow {
+  @include popper_arrow;
+}

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

@@ -1,6 +1,6 @@
 @import "src/styles/variables";
 
-$row_height: 24px;
+$row_height: 26px;
 
 .row {
   height: $row_height;
@@ -18,7 +18,7 @@ $row_height: 24px;
 
   &:hover, &.selected {
     opacity: 1;
-    background: transparentize($wisegreen, 0.5);
+    background: transparentize($wisegreen, 0.6);
   }
 
   &.right {

src/styles/_mixins.scss

@@ -283,3 +283,34 @@
     opacity: 1;
   }
 }
+
+@mixin popper_arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+
+  [data-popper-placement*='bottom'] & {
+    border-width: 0 10px 10px 10px;
+    border-color: transparent transparent lighten($menu_bg, 6%) transparent;
+    top: -10px;
+  }
+
+  [data-popper-placement*='top'] & {
+    border-width: 10px 10px 0 10px;
+    border-color: lighten($menu_bg, 6%) transparent transparent transparent;
+    bottom: -10px;
+  }
+
+  [data-popper-placement*='right'] & {
+    border-width: 10px 10px 10px 0;
+    border-color: transparent lighten($menu_bg, 6%) transparent transparent;
+    left: -10px;
+  }
+
+  [data-popper-placement*='left'] & {
+    border-width: 10px 0 10px 10px;
+    border-color: transparent transparent transparent lighten($menu_bg, 6%);
+    right: -10px;
+  }
+}