From 4107c09cfb7d95fbf8018d868f81c05592e9105c Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Tue, 20 Jul 2021 23:01:20 +0500
Subject: [PATCH] fix: improve tags filtering ux

---
 apps/web/src/components/editor/header.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/editor/header.js b/apps/web/src/components/editor/header.js
index e168f6cdb..bf96eb3f2 100644
--- a/apps/web/src/components/editor/header.js
+++ b/apps/web/src/components/editor/header.js
@@ -90,7 +90,7 @@ function Autosuggest({
   sx,
 }) {
   const [filtered, setFiltered] = useState([]);
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
   const inputRef = useRef();
   return (
     <Flex
@@ -138,8 +138,13 @@ function Autosuggest({
         }}
         onKeyDown={(e) => {
           if (e.key === "Enter") {
-            onAdd(e.target.value);
+            if (selectedIndex > -1) {
+              onSelect(filtered[selectedIndex]);
+            } else {
+              onAdd(e.target.value);
+            }
             e.target.value = "";
+            setFiltered([]);
           } else if (e.target.value === "" && e.key === "Backspace") {
             onRemove();
           } else if (e.key === "Escape") {
@@ -160,7 +165,8 @@ function Autosuggest({
         }}
       />
       {filtered.length ? (
-        <Box
+        <Flex
+          flexDirection="column"
           sx={{
             position: "absolute",
             top: 25,
@@ -191,7 +197,7 @@ function Autosuggest({
               {renderSuggestion(item, selectedIndex === index)}
             </Button>
           ))}
-        </Box>
+        </Flex>
       ) : null}
     </Flex>
   );