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

@@ -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();