From a0b8262fb6436eadcc033b3ca6e5a8184c784c20 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 19 Sep 2022 17:02:16 +0500
Subject: [PATCH] web: can't add a tag that's a substring of another tag (fixes
 #1002)

---
 apps/web/__e2e__/notes.issues.test.ts    | 23 ++++++++++++++++++++++-
 apps/web/src/components/editor/header.js | 13 +++++++++++--
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/apps/web/__e2e__/notes.issues.test.ts b/apps/web/__e2e__/notes.issues.test.ts
index b9a7c505f..56db26573 100644
--- a/apps/web/__e2e__/notes.issues.test.ts
+++ b/apps/web/__e2e__/notes.issues.test.ts
@@ -17,5 +17,26 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test } from "@playwright/test";
+import { expect, test } from "@playwright/test";
+import { AppModel } from "./models/app.model";
+import { NOTE } from "./utils";
 test.skip("TODO: make sure jump to group works", () => {});
+
+test("#1002 Can't add a tag that's a substring of an existing tag", async ({
+  page
+}) => {
+  const tags = ["chromeos-105", "chromeos"];
+  const app = new AppModel(page);
+  await app.goto();
+  const tagsView = await app.goToTags();
+  await tagsView.createItem({ title: "chromeos-105" });
+  const notes = await app.goToNotes();
+  await notes.createNote(NOTE);
+
+  await notes.editor.setTags(tags);
+  await page.waitForTimeout(200);
+
+  const noteTags = await notes.editor.getTags();
+  expect(noteTags).toHaveLength(tags.length);
+  expect(noteTags.every((t, i) => t === tags[i])).toBe(true);
+});
diff --git a/apps/web/src/components/editor/header.js b/apps/web/src/components/editor/header.js
index f298c42ee..1da77ea3f 100644
--- a/apps/web/src/components/editor/header.js
+++ b/apps/web/src/components/editor/header.js
@@ -110,14 +110,21 @@ function Autosuggest({
     if (filterText.length <= 0 && filtered.length <= 0) {
       closeMenu();
       return;
-    } else if (filterText.length > 0 && filtered.length <= 0) {
+    }
+
+    if (
+      filterText.length > 0 &&
+      filtered.every((item) => item.title !== filterText)
+    ) {
       items.push({
         key: "new",
         title: () => `Create "${filterText}" tag`,
         icon: Icon.Plus,
         onClick: () => onAction("add", filterText)
       });
-    } else {
+    }
+
+    if (filtered.length > 0) {
       items.push(
         ...filtered.map((tag) => ({
           key: tag.id,
@@ -177,6 +184,8 @@ function Autosuggest({
         const text = getInputValue();
         if (e.key === "Enter" && !!text && !filtered.length) {
           onAction("add", text);
+        } else if (e.key === "Enter" && !!text && !!filtered.length) {
+          onAction("select", filtered[0]);
         } else if (!text && e.key === "Backspace") {
           onRemove();
           setFiltered([]);