jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix bug introduced in #2276 causing number inputs to abort on any keyboard input, not just Esc

This commit is contained in:
Keavon Chambers 2025-03-01 01:17:07 -08:00
parent 37b4e3d410
commit bc6e76208d
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/widgets/inputs/NumberInput.svelte
View File

@ -277,11 +277,11 @@
clearTimeout(repeatTimeout); clearTimeout(repeatTimeout);
} }
function onIncrementMouseDown(e: MouseEvent) { function incrementPressAbort(e: KeyboardEvent | MouseEvent) {
if (e.button === BUTTON_RIGHT) incrementPressAbort(); // Only abort if the user right clicks or presses Escape
} if (e instanceof KeyboardEvent && e.key !== "Escape") return;
if (e instanceof MouseEvent && e.button !== BUTTON_RIGHT) return;
function incrementPressAbort() {
const element = self?.element() || undefined; const element = self?.element() || undefined;
if (element) preventEscapeClosingParentFloatingMenu(element); if (element) preventEscapeClosingParentFloatingMenu(element);
@ -580,15 +580,14 @@
// Logic for aborting from a right click or pressing Escape. // Logic for aborting from a right click or pressing Escape.
const abortWithEscape = e instanceof KeyboardEvent && e.key === "Escape"; const abortWithEscape = e instanceof KeyboardEvent && e.key === "Escape";
const abortWithRightClick = e instanceof MouseEvent && e.button === BUTTON_RIGHT; const abortWithRightClick = e instanceof MouseEvent && e.button === BUTTON_RIGHT;
if (abortWithEscape || abortWithRightClick) {
// Call the abort helper function // Call the abort helper function
sliderAbort(abortWithEscape); if (abortWithEscape || abortWithRightClick) sliderAbort(abortWithEscape);
// Clean up these event listeners because they were for getting us into this function and now we're done with them. // Clean up these event listeners because they were for getting us into this function and now we're done with them.
removeEventListener("mousedown", sliderAbortFromMousedown); removeEventListener("mousedown", sliderAbortFromMousedown);
removeEventListener("keydown", sliderAbortFromMousedown); removeEventListener("keydown", sliderAbortFromMousedown);
} }
}
// Helper function that performs the state management and cleanup for aborting the slider drag. // Helper function that performs the state management and cleanup for aborting the slider drag.
function sliderAbort(abortWithEscape: boolean) { function sliderAbort(abortWithEscape: boolean) {
@ -658,7 +657,7 @@
<button <button
class="arrow left" class="arrow left"
on:pointerdown={(e) => onIncrementPointerDown(e, "Decrease")} on:pointerdown={(e) => onIncrementPointerDown(e, "Decrease")}
on:mousedown={onIncrementMouseDown} on:mousedown={incrementPressAbort}
on:pointerup={onIncrementPointerUp} on:pointerup={onIncrementPointerUp}
on:pointerleave={onIncrementPointerUp} on:pointerleave={onIncrementPointerUp}
tabindex="-1" tabindex="-1"
@ -666,7 +665,7 @@
<button <button
class="arrow right" class="arrow right"
on:pointerdown={(e) => onIncrementPointerDown(e, "Increase")} on:pointerdown={(e) => onIncrementPointerDown(e, "Increase")}
on:mousedown={onIncrementMouseDown} on:mousedown={incrementPressAbort}
on:pointerup={onIncrementPointerUp} on:pointerup={onIncrementPointerUp}
on:pointerleave={onIncrementPointerUp} on:pointerleave={onIncrementPointerUp}
tabindex="-1" tabindex="-1"
@ -738,6 +737,9 @@
background: rgba(var(--color-1-nearblack-rgb), 0.5); background: rgba(var(--color-1-nearblack-rgb), 0.5);
// An outline can appear when pressing the arrow button with left click then hitting Escape, so this stops that from showing // An outline can appear when pressing the arrow button with left click then hitting Escape, so this stops that from showing
outline: none; outline: none;
// TODO: This is a quick, imperfect way to make the arrow buttons appear like they're behind the text (without messing with the element click targets if we used z-index).
// TODO: But it doesn't preserve the exact hover color due to the blending. Improve this by using a separate element for displaying the arrow and listening for pointer events.
mix-blend-mode: screen;
&.right { &.right {
right: 0; right: 0;