fix(desktop): improve crop options menu click and positioning

Author: richiemcilroy

apps/desktop/src/routes/capture-area.tsx

@@ -157,6 +157,7 @@ export default function CaptureArea() {
 
 	async function showCropOptionsMenu(e: UIEvent, positionAtCursor = false) {
 		e.preventDefault();
+		e.stopPropagation();
 		const items = createCropOptionsMenuItems({
 			aspect: aspect(),
 			snapToRatioEnabled: state.snapToRatio,
@@ -166,11 +167,10 @@ export default function CaptureArea() {
 		const menu = await Menu.new({ items });
 		let pos: LogicalPosition | undefined;
 		if (!positionAtCursor) {
-			const rect = (e.target as HTMLDivElement).getBoundingClientRect();
+			const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
 			pos = new LogicalPosition(rect.x, rect.y + 50);
 		}
 		await menu.popup(pos);
-		await menu.close();
 	}
 
 	return (
@@ -222,7 +222,6 @@ export default function CaptureArea() {
 										title="Aspect Ratio"
 										class="group flex items-center justify-center size-10 text-gray-11 hover:bg-gray-5 active:bg-gray-6 rounded-full transition-colors duration-200 cursor-default"
 										type="button"
-										onMouseDown={showCropOptionsMenu}
 										onClick={showCropOptionsMenu}
 									>
 										<div class="relative size-5 pointer-events-none">

apps/desktop/src/routes/editor/Editor.tsx

@@ -989,6 +989,7 @@ function Dialogs() {
 									positionAtCursor = false,
 								) {
 									e.preventDefault();
+									e.stopPropagation();
 									const items = createCropOptionsMenuItems({
 										aspect: aspect(),
 										snapToRatioEnabled: snapToRatio(),
@@ -999,12 +1000,11 @@ function Dialogs() {
 									let pos: LogicalPosition | undefined;
 									if (!positionAtCursor) {
 										const rect = (
-											e.target as HTMLDivElement
+											e.currentTarget as HTMLDivElement
 										).getBoundingClientRect();
 										pos = new LogicalPosition(rect.x, rect.y + 40);
 									}
 									await menu.popup(pos);
-									await menu.close();
 								}
 
 								function BoundInput(props: {
@@ -1065,7 +1065,6 @@ function Dialogs() {
 													variant="white"
 													size="xs"
 													class="flex items-center justify-center text-center rounded-full h-[2rem] w-[2rem] border focus:border-blue-9"
-													onMouseDown={showCropOptionsMenu}
 													onClick={showCropOptionsMenu}
 												>
 													<div class="relative pointer-events-none size-4">

apps/desktop/src/routes/screenshot-editor/Editor.tsx

@@ -256,6 +256,7 @@ function Dialogs() {
 									positionAtCursor = false,
 								) {
 									e.preventDefault();
+									e.stopPropagation();
 									const items = createCropOptionsMenuItems({
 										aspect: aspect(),
 										snapToRatioEnabled: snapToRatio(),
@@ -266,12 +267,11 @@ function Dialogs() {
 									let pos: LogicalPosition | undefined;
 									if (!positionAtCursor) {
 										const rect = (
-											e.target as HTMLDivElement
+											e.currentTarget as HTMLDivElement
 										).getBoundingClientRect();
 										pos = new LogicalPosition(rect.x, rect.y + 40);
 									}
 									await menu.popup(pos);
-									await menu.close();
 								}
 
 								function BoundInput(props: {
@@ -332,7 +332,6 @@ function Dialogs() {
 													variant="white"
 													size="xs"
 													class="flex items-center justify-center text-center rounded-full h-[2rem] w-[2rem] border focus:border-blue-9"
-													onMouseDown={showCropOptionsMenu}
 													onClick={showCropOptionsMenu}
 												>
 													<div class="relative pointer-events-none size-4">

apps/desktop/src/routes/target-select-overlay.tsx

@@ -897,6 +897,7 @@ function Inner() {
 
 					async function showCropOptionsMenu(e: UIEvent) {
 						e.preventDefault();
+						e.stopPropagation();
 						const items = [
 							{
 								text: "Reset selection",
@@ -919,7 +920,6 @@ function Inner() {
 						];
 						const menu = await Menu.new({ items });
 						await menu.popup();
-						await menu.close();
 					}
 
 					// Spacing rules: