From 20327b4eda117adea1240e6606a5303f6b38fa6b Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Wed, 28 Oct 2026 14:06:03 +0100
Subject: [PATCH] :bug: Keep the default cursor in the token dropdown of
 numeric inputs

A numeric input that can be scrubbed sets the ew-resize cursor on its
wrapper, and the token dropdown renders inside that wrapper, so the
whole list inherited the scrub cursor. Give the options dropdown the
default cursor, so it never takes the cursor of the control that opens
it.

AI-assisted-by: claude-opus-5-5
---
 .../playwright/ui/specs/tokens/apply.spec.js  | 30 +++++++++++++++++++
 .../ds/controls/shared/options_dropdown.scss  |  4 +++
 2 files changed, 34 insertions(+)

diff --git a/frontend/playwright/ui/specs/tokens/apply.spec.js b/frontend/playwright/ui/specs/tokens/apply.spec.js
index a0e91b7c60..e13a377ae7 100644
--- a/frontend/playwright/ui/specs/tokens/apply.spec.js
+++ b/frontend/playwright/ui/specs/tokens/apply.spec.js
@@ -259,6 +259,36 @@ test.describe("Tokens: Apply token", () => {
     await expect(opacityLowPill).toBeVisible();
   });
 
+  test("Token dropdown of a scrubbable numeric input shows the default cursor", async ({
+    page,
+  }) => {
+    const { workspacePage } = await setupTokensFileRender(page);
+
+    await page.getByRole("tab", { name: "Layers" }).click();
+    await workspacePage.layers.getByTestId("layer-row").nth(1).click();
+
+    const layerMenuSection = page.getByRole("region", {
+      name: "Layer menu section",
+    });
+    const opacityWrapper = layerMenuSection
+      .getByTestId("numeric-input-wrapper")
+      .first();
+    await expect(opacityWrapper).toHaveCSS("cursor", "ew-resize");
+
+    await layerMenuSection
+      .getByRole("button", { name: "Open token list" })
+      .click();
+
+    // The scrub cursor belongs to the input, not to the dropdown it opens.
+    const tokenList = layerMenuSection.getByRole("listbox");
+    await expect(tokenList).toBeVisible();
+    await expect(tokenList).toHaveCSS("cursor", "default");
+    await expect(tokenList.getByRole("option").first()).toHaveCSS(
+      "cursor",
+      "default",
+    );
+  });
+
   test("User applies typography token to a text shape", async ({ page }) => {
     const { workspacePage, tokensSidebar, tokenContextMenuForToken } =
       await setupTypographyTokensFileRender(page);
diff --git a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss
index c961b9e06c..6480e6cd79 100644
--- a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss
+++ b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss
@@ -29,6 +29,10 @@
   z-index: var(--z-index-dropdown);
   box-shadow: 0 0 $sz-12 0 var(--color-shadow-dark);
 
+  // Do not inherit the cursor of the control that opens it (e.g. the
+  // scrub cursor of the numeric input).
+  cursor: default;
+
   &:focus {
     outline: none;
   }