🐛 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
This commit is contained in:
Eva Marco 2026-10-28 14:06:03 +01:00
parent 506923e2e9
commit 20327b4eda
2 changed files with 34 additions and 0 deletions

View File

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

View File

@ -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;
}