From 94d10a6f22d34884e3baef02151e42585c577dc9 Mon Sep 17 00:00:00 2001 From: seabeeberry Date: Mon, 21 Jul 2025 21:31:52 +0200 Subject: [PATCH 1/2] Placed PointerLock inside pointermove event handler to ensure Safari compatibility for dragging --- .../widgets/inputs/NumberInput.svelte | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte index 82a48a497d..264408b576 100644 --- a/frontend/src/components/widgets/inputs/NumberInput.svelte +++ b/frontend/src/components/widgets/inputs/NumberInput.svelte @@ -325,7 +325,14 @@ if (alreadyActedGuard) return; alreadyActedGuard = true; isDragging = true; - beginDrag(e); + + // We need to request pointer lock as immediately as possible for Safari compatibility + const target = e.target || undefined; + if (!(target instanceof HTMLElement)) return; + + target.requestPointerLock(); + + beginDrag(); removeEventListener("pointermove", onMove); }; // If it's a mouseup, we'll begin editing the text field. @@ -340,13 +347,7 @@ addEventListener("pointerup", onUp); } - function beginDrag(e: PointerEvent) { - // Get the click target - const target = e.target || undefined; - if (!(target instanceof HTMLElement)) return; - - // Enter dragging state - target.requestPointerLock(); + function beginDrag() { initialValueBeforeDragging = value; cumulativeDragDelta = 0; From 084f8e9b231e279e702a242843213b132396d5c4 Mon Sep 17 00:00:00 2001 From: seabeeberry Date: Tue, 22 Jul 2025 11:44:39 +0200 Subject: [PATCH 2/2] Applied review suggestion: pointermove now is not leaking when target is not an instance of HTMLElement --- .../src/components/widgets/inputs/NumberInput.svelte | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte index 264408b576..d88c7ae235 100644 --- a/frontend/src/components/widgets/inputs/NumberInput.svelte +++ b/frontend/src/components/widgets/inputs/NumberInput.svelte @@ -326,13 +326,14 @@ alreadyActedGuard = true; isDragging = true; - // We need to request pointer lock as immediately as possible for Safari compatibility + // We begin dragging if the target supports pointer lock. + // We need to request pointer lock as immediately as possible for Safari compatibility. const target = e.target || undefined; - if (!(target instanceof HTMLElement)) return; - - target.requestPointerLock(); + if (target instanceof HTMLElement) { + target.requestPointerLock(); + beginDrag(); + } - beginDrag(); removeEventListener("pointermove", onMove); }; // If it's a mouseup, we'll begin editing the text field.