🐛 Fix filter tokens to be case-sensitive (#9800)

* 🐛 Fix filter tokens to be case-sensitive

* ♻️ Add test

frontend/playwright/ui/specs/tokens/apply.spec.js

@@ -1200,9 +1200,7 @@ test("BUG: 14200, Tokens in sets are applied when clicking on Save during creati
   await expect(borderTokenPill).not.toBeVisible();
 });
 
-test("Check token application across sets", async ({
+test("Check token application across sets", async ({ page }) => {
-  page,
-}) => {
   // Setup the workspace with token features enabled
   const {
     workspacePage,
@@ -1253,7 +1251,7 @@ test("Check token application across sets", async ({
     });
     await submitButton.click();
     await expect(tokensUpdateCreateModal).not.toBeVisible();
-  }
+  };
 
   // Select rectangle layer
   await page.getByRole("tab", { name: "Layers" }).click();
@@ -1268,7 +1266,9 @@ test("Check token application across sets", async ({
 
   // Create nested token set, select it and activate it
   await createSet(tokenThemesSetsSidebar, "device/desktop");
-  const desktopSetButton = tokenThemesSetsSidebar.getByRole("button", { name: "desktop" });
+  const desktopSetButton = tokenThemesSetsSidebar.getByRole("button", {
+    name: "desktop",
+  });
   await desktopSetButton.click();
   await desktopSetButton.getByRole("checkbox").click();
 
@@ -1292,14 +1292,18 @@ test("Check token application across sets", async ({
   await expect(borderTokenPill).not.toBeVisible();
 
   // Apply token to shape
-  await tokensSidebar.getByRole('button', { name: 'border-radius', exact: true }).click();
+  await tokensSidebar
+    .getByRole("button", { name: "border-radius", exact: true })
+    .click();
 
   await expect(borderTokenPill).toBeVisible();
   await expect(borderTokenPill).toHaveText("20");
 
   //Create new set, select it and activate it
   await createSet(tokenThemesSetsSidebar, "device/mobile");
-  const mobileSetButton = tokenThemesSetsSidebar.getByRole("button", { name: "mobile" });
+  const mobileSetButton = tokenThemesSetsSidebar.getByRole("button", {
+    name: "mobile",
+  });
   await mobileSetButton.click();
   await mobileSetButton.getByRole("checkbox").click();
 
@@ -1768,3 +1772,36 @@ test.describe("Numeric Input and Token Integration Tests", () => {
     await expect(brokenPill).toHaveCount(2);
   });
 });
+
+test("BUG: 14234, Numeric input token filtering must be case sensitive", async ({
+  page,
+}) => {
+  const { workspacePage, tokensSidebar } = await setupTokensFileRender(page, {
+    flags: ["enable-token-combobox", "enable-feature-token-input"],
+  });
+
+  await page.getByRole("tab", { name: "Layers" }).click();
+  await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+  const tokensTabButton = page.getByRole("tab", { name: "Tokens" });
+  await tokensTabButton.click();
+  await unfoldTokenType(tokensSidebar, "dimensions");
+
+  await createToken(page, "Dimensions", "Dim-up", "Value", "20");
+  await createToken(page, "Dimensions", "dim-up", "Value", "10");
+  const measuresSection = page.getByRole("region", {
+    name: "shape-measures-section",
+  });
+  await expect(measuresSection).toBeVisible();
+  const widthInput = measuresSection.getByRole("textbox", {
+    name: "Width",
+  });
+  await widthInput.click();
+  await widthInput.type("{Dim");
+  await expect(
+    measuresSection.getByText("Dim-up", { exact: true }),
+  ).toBeVisible();
+  await expect(
+    measuresSection.getByText("dim-up", { exact: true }),
+  ).not.toBeVisible();
+});

frontend/src/app/main/ui/ds/controls/numeric_input.cljs

@@ -344,6 +344,7 @@
          (mf/deps apply-token)
          (fn [id value name]
            (mf/set-ref-val! token-selection-in-progress* true)
+           (mf/set-ref-val! dirty-ref false)
            (reset! selected-id* id)
            (reset! focused-id* nil)
            (reset! is-open* false)
@@ -434,7 +435,11 @@
                  (let [name  (clean-token-name (mf/ref-val raw-value*))
                        token (get-option-by-name options name)]
                    (if token
-                     (apply-token (:resolved-value token) name)
+                     (do
+                       (apply-token (:resolved-value token) name)
+                       (mf/set-ref-val! dirty-ref false)
+                       (reset! filter-id* "")
+                       (handle-blur event))
                      (apply-value (mf/ref-val last-value*))))
                  (reset! is-open* false))
 

frontend/src/app/main/ui/workspace/tokens/management/forms/controls/utils.cljs

@@ -53,13 +53,12 @@
 
 (defn- filter-token-groups-by-name
   [tokens filter-text]
-  (let [lc-filter (str/lower filter-text)]
+  (into {}
-    (into {}
+        (keep (fn [[group tokens]]
-          (keep (fn [[group tokens]]
+                (let [filtered (filter #(str/includes? (:name %) filter-text) tokens)]
-                  (let [filtered (filter #(str/includes? (str/lower (:name %)) lc-filter) tokens)]
+                  (when (seq filtered)
-                    (when (seq filtered)
+                    [group filtered]))))
-                      [group filtered]))))
+        tokens))
-          tokens)))
 
 (defn- sort-groups-and-tokens
   "Sorts the tokens inside the groups alphabetically.