From 5431ab97af3c7e4f4a0452cf2b4ff0288b8abccb Mon Sep 17 00:00:00 2001
From: penguin-teal <130006737+penguin-teal@users.noreply.github.com>
Date: Fri, 1 Mar 2024 15:27:44 -0600
Subject: [PATCH] fix(commandline): select exact command matches (#5164)

Because of the RegEx, typing a command such as the language "code c" selects the item "code python" because the word "code" is being matched twice. This change makes it so that when an exact match of a `display` field is typed, it is selected (when I type "code c" I expect to be able to just hit enter but it selects "code python").

Co-authored-by: Jack <jack@monkeytype.com>
---
 frontend/src/ts/commandline/index.ts | 46 ++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/frontend/src/ts/commandline/index.ts b/frontend/src/ts/commandline/index.ts
index 0423af3f9..e97b7ab43 100644
--- a/frontend/src/ts/commandline/index.ts
+++ b/frontend/src/ts/commandline/index.ts
@@ -168,7 +168,8 @@ function showFound(): void {
 }
 
 function updateSuggested(): void {
-  const inputVal = ($("#commandLine input").val() as string)
+  const rawInputStr = $("#commandLine input").val() as string;
+  const inputVal = rawInputStr
     .toLowerCase()
     .split(" ")
     .filter((s, i) => s || i === 0); //remove empty entries after first
@@ -187,6 +188,11 @@ function updateSuggested(): void {
     showFound();
     return;
   }
+
+  // -1 means that we can set the activeIndex as normal at the end
+  // otherwise, this is what to set activeIndex to
+  let setIndex = -1;
+
   //ignore the preceeding ">"s in the command line input
   if (inputVal[0]?.startsWith(">")) {
     inputVal[0] = inputVal[0].replace(/^>+/, "");
@@ -196,16 +202,24 @@ function updateSuggested(): void {
       if (obj.visible !== false) obj.found = true;
     }
   } else {
-    for (const obj of list.list) {
+    let shownItemsCount = 0;
+    for (const lItem of list.list) {
       let foundcount = 0;
+
       for (const obj2 of inputVal) {
         if (obj2 === "") return;
         const escaped = obj2.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
         const re = new RegExp("\\b" + escaped, "g");
-        const res = obj.display.toLowerCase().match(re);
+        const res = lItem.display.toLowerCase().match(re);
         const res2 =
-          obj.alias !== undefined ? obj.alias.toLowerCase().match(re) : null;
-        if (
+          lItem.alias !== undefined
+            ? lItem.alias.toLowerCase().match(re)
+            : null;
+        if (lItem.display === rawInputStr) {
+          setIndex = shownItemsCount;
+          foundcount = inputVal.length;
+          break;
+        } else if (
           (res != null && res.length > 0) ||
           (res2 != null && res2.length > 0)
         ) {
@@ -215,21 +229,27 @@ function updateSuggested(): void {
         }
       }
       if (foundcount > inputVal.length - 1) {
-        obj.found = true;
+        lItem.found = true;
+        shownItemsCount++;
       } else {
-        obj.found = false;
+        lItem.found = false;
       }
     }
   }
   showFound();
 
-  // display background hover effect for selected language
-  const scrollTarget = $(".suggestions .entry .icon i.fa-check");
-  const entryIndex = scrollTarget.parent().parent().attr("index");
-  if (entryIndex !== undefined) {
-    activeIndex = parseInt(entryIndex);
+  if (setIndex !== -1) {
+    activeIndex = setIndex;
   } else {
-    activeIndex = 0;
+    // display background hover effect for selected language
+    const scrollTarget = $(".suggestions .entry .icon i.fa-check");
+    const entryIndex = scrollTarget.parent().parent().attr("index");
+
+    if (entryIndex !== undefined) {
+      activeIndex = parseInt(entryIndex);
+    } else {
+      activeIndex = 0;
+    }
   }
 
   updateActiveEntry();