github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2025-12-25 21:36:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): Fix avatar context menu closing on diagonal mouse movement (#11994)

Browse Source
This commit is contained in:
sp.wack 2025-12-11 19:17:21 +04:00 committed by GitHub
parent f76016aa4d
commit 94086f119a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/features/sidebar/user-actions.tsx
View File

@ -58,6 +58,9 @@ export function UserActions({ onLogout, user, isLoading }: UserActionsProps) {
className={cn(
"opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto",
showMenu && "opacity-100 pointer-events-auto",
// Invisible hover bridge: extends hover zone to create a "safe corridor"
// for diagonal mouse movement to the menu (only active when menu is visible)
"group-hover:before:absolute group-hover:before:bottom-0 group-hover:before:right-0 group-hover:before:w-[200px] group-hover:before:h-[300px]",
)}
>
<AccountSettingsContextMenu

48
frontend/tests/avatar-menu.spec.ts Normal file
View File

@ -0,0 +1,48 @@
import test, { expect } from "@playwright/test";
/**
* Test for issue #11933: Avatar context menu closes when moving cursor diagonally
*
* This test verifies that the user can move their cursor diagonally from the
* avatar to the context menu without the menu closing unexpectedly.
*/
test("avatar context menu stays open when moving cursor diagonally to menu", async ({
page,
browserName,
}) => {
// Skip on WebKit - Playwright's mouse.move() doesn't reliably trigger CSS hover states
test.skip(browserName === "webkit", "Playwright hover simulation unreliable");
await page.goto("/");
// Get the user avatar button
const userAvatar = page.getByTestId("user-avatar");
await expect(userAvatar).toBeVisible();
// Get avatar bounding box first
const avatarBox = await userAvatar.boundingBox();
if (!avatarBox) {
throw new Error("Could not get bounding box for avatar");
}
// Use mouse.move to hover (not .hover() which may trigger click)
const avatarCenterX = avatarBox.x + avatarBox.width / 2;
const avatarCenterY = avatarBox.y + avatarBox.height / 2;
await page.mouse.move(avatarCenterX, avatarCenterY);
// The context menu should appear via CSS group-hover
const contextMenu = page.getByTestId("account-settings-context-menu");
await expect(contextMenu).toBeVisible();
// Move UP from the LEFT side of the avatar - simulating diagonal movement
// toward the menu (which is to the right). This exits the hover zone.
const leftX = avatarBox.x + 2;
const aboveY = avatarBox.y - 50;
await page.mouse.move(leftX, aboveY);
// The menu uses opacity-0/opacity-100 for visibility via CSS.
// Use toHaveCSS which auto-retries, avoiding flaky waitForTimeout.
// The menu should remain visible (opacity 1) to allow diagonal access to it.
const menuWrapper = contextMenu.locator("..");
await expect(menuWrapper).toHaveCSS("opacity", "1");
});