fixed popeper placement

src/components/containers/Sticky/index.tsx

@@ -1,16 +1,14 @@
 import React, { DetailsHTMLAttributes, FC } from 'react';
-import StickyBox from 'react-stickynode';
+import StickyBox from 'react-sticky-box';
 
 interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {
   offsetTop?: number;
 }
 
-const Sticky: FC<IProps> = ({ children, offsetTop = 65 }) => {
+const Sticky: FC<IProps> = ({ children, offsetTop = 65 }) => (
-  return (
+  <StickyBox offsetTop={offsetTop} offsetBottom={10}>
-    <StickyBox offsetTop={offsetTop} offsetBottom={10}>
+    {children}
-      {children}
+  </StickyBox>
-    </StickyBox>
+);
-  );
-};
 
 export { Sticky };

src/components/tags/TagAutocomplete/index.tsx

@@ -35,6 +35,7 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
 
   const pop = usePopper(wrapper?.current?.parentElement, wrapper.current, {
     placement: 'bottom-end',
+    strategy: 'fixed',
     modifiers: [
       {
         name: 'offset',

src/containers/tags/TagInput/index.tsx

@@ -101,8 +101,8 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
 
   const onAutocompleteSelect = useCallback(
     (val: string) => {
-      onAppend([val]);
       setInput('');
+      onAppend([val]);
     },
     [onAppend, setInput]
   );