diff --git a/packages/app/e2e/regression/directory-picker.spec.ts b/packages/app/e2e/regression/directory-picker.spec.ts new file mode 100644 index 00000000000..7d61a2eb0ba --- /dev/null +++ b/packages/app/e2e/regression/directory-picker.spec.ts @@ -0,0 +1,39 @@ +import { expect, test } from "@playwright/test" +import { fileNode, openSettings } from "../utils/workspace" + +test.use({ viewport: { width: 1440, height: 900 } }) + +test("the folder picker's tree scrolls with the mouse wheel inside the modal", async ({ page }) => { + const directory = "/projects/big" + let listing = false + + await openSettings(page, { + name: "Picker", + directory, + fileList: () => + listing + ? Array.from({ length: 500 }, (_, index) => + fileNode(directory, `dir-${String(index).padStart(3, "0")}`, "directory"), + ) + : [], + seed: { tabs: [] }, + }) + await page.getByTestId("settings-screen").getByRole("tab", { name: "Projects", exact: true }).click() + listing = true + await page.getByRole("button", { name: "Add project", exact: true }).click() + const picker = page.getByRole("dialog", { name: "Open project", exact: true }) + + const scrollTop = () => + page.evaluate( + () => + document + .querySelector(".directory-picker-tree") + ?.shadowRoot?.querySelector("[data-file-tree-virtualized-scroll]")?.scrollTop, + ) + + await expect.poll(scrollTop).toBe(0) + const browser = await picker.locator(".directory-picker-browser").boundingBox() + await page.mouse.move(browser!.x + browser!.width / 2, browser!.y + browser!.height / 2) + await page.mouse.wheel(0, 300) + await expect.poll(scrollTop).toBeGreaterThan(0) +}) diff --git a/packages/app/src/workspaces/selection/dialog.tsx b/packages/app/src/workspaces/selection/dialog.tsx index 5d5830ba2b1..2c355f31cd7 100644 --- a/packages/app/src/workspaces/selection/dialog.tsx +++ b/packages/app/src/workspaces/selection/dialog.tsx @@ -14,7 +14,6 @@ import { activeTreeNavigation, advanceTreePreload, nextSuggestionIndex, - nextTreeScrollTop, pickerFileSearchQuery, pickerAbsoluteInput, pickerMode, @@ -389,27 +388,10 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
event.stopPropagation()} - onWheel={(event) => { - const scroller = tree - ?.getFileTreeContainer() - ?.shadowRoot?.querySelector("[data-file-tree-virtualized-scroll]") - - if (!scroller) return - - const next = nextTreeScrollTop( - scroller.scrollTop, - event.deltaY, - scroller.scrollHeight, - scroller.clientHeight, - ) - - if (next === scroller.scrollTop) return - event.preventDefault() - scroller.scrollTop = next - scroller.dispatchEvent(new Event("scroll")) - }} + on:wheel={{ handleEvent: (event: WheelEvent) => event.stopPropagation(), passive: true }} >
{language.t("common.loading")}