From 7af0c27f3ac1bf16ede6a05660b238ac5f0e0362 Mon Sep 17 00:00:00 2001 From: Kashargul <144968721+Kashargul@users.noreply.github.com> Date: Fri, 6 Sep 2024 21:48:40 +0200 Subject: [PATCH 1/6] Fix number input --- lib/components/NumberInput.tsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/lib/components/NumberInput.tsx b/lib/components/NumberInput.tsx index b0d36f0..e3283c1 100644 --- a/lib/components/NumberInput.tsx +++ b/lib/components/NumberInput.tsx @@ -126,19 +126,23 @@ export class NumberInput extends Component { const stepOffset = isFinite(minValue) ? minValue % step : 0; // Translate mouse movement to value // Give it some headroom (by increasing clamp range by 1 step) - state.currentValue = clamp( + const internalValue = clamp( state.currentValue + (offset * step) / (stepPixelSize || 1), minValue - step, maxValue + step, ); - // Clamp the final value - state.currentValue = clamp( - state.currentValue - (state.currentValue % step) + stepOffset, - minValue, - maxValue, - ); - // Set the new origin - state.origin = event.screenY; + if (Math.abs(internalValue - state.currentValue) >= step) { + // Clamp the final value + { + state.currentValue = clamp( + internalValue - (internalValue % step) + stepOffset, + minValue, + maxValue, + ); + } + // Set the new origin + state.origin = event.screenY; + } } else if (Math.abs(offset) > 4) { state.dragging = true; } From 881bc4aec310ec4e16cc5b48734360872f55f6ec Mon Sep 17 00:00:00 2001 From: Kashargul <144968721+Kashargul@users.noreply.github.com> Date: Fri, 6 Sep 2024 21:49:37 +0200 Subject: [PATCH 2/6] slightly higher delay --- lib/components/NumberInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/NumberInput.tsx b/lib/components/NumberInput.tsx index e3283c1..f0fe549 100644 --- a/lib/components/NumberInput.tsx +++ b/lib/components/NumberInput.tsx @@ -176,7 +176,7 @@ export class NumberInput extends Component { setTimeout(() => { input.focus(); input.select(); - }, 1); + }, 10); } } From 33eebdbc05743b7dd6e26a8c87be1a0955e3b1c8 Mon Sep 17 00:00:00 2001 From: Kashargul <144968721+Kashargul@users.noreply.github.com> Date: Sat, 7 Sep 2024 14:22:08 +0200 Subject: [PATCH 3/6] no modulo with floats --- lib/components/NumberInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/NumberInput.tsx b/lib/components/NumberInput.tsx index f0fe549..ff59a3d 100644 --- a/lib/components/NumberInput.tsx +++ b/lib/components/NumberInput.tsx @@ -8,7 +8,7 @@ import { } from 'react'; import { isEscape, KEY } from '../common/keys'; -import { clamp } from '../common/math'; +import { clamp, round } from '../common/math'; import { BooleanLike, classes } from '../common/react'; import styles from '../styles/components/NumberInput.module.scss'; import { AnimatedNumber } from './AnimatedNumber'; @@ -135,7 +135,7 @@ export class NumberInput extends Component { // Clamp the final value { state.currentValue = clamp( - internalValue - (internalValue % step) + stepOffset, + round(internalValue / step, 0) * step + stepOffset, minValue, maxValue, ); From 369fa2603948580d655096643dff59fb28a93f22 Mon Sep 17 00:00:00 2001 From: Kashargul <144968721+Kashargul@users.noreply.github.com> Date: Sat, 7 Sep 2024 14:26:47 +0200 Subject: [PATCH 4/6] no more offset --- lib/components/NumberInput.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/components/NumberInput.tsx b/lib/components/NumberInput.tsx index ff59a3d..21ac037 100644 --- a/lib/components/NumberInput.tsx +++ b/lib/components/NumberInput.tsx @@ -123,7 +123,6 @@ export class NumberInput extends Component { const offset = state.origin - event.screenY; if (prevState.dragging) { - const stepOffset = isFinite(minValue) ? minValue % step : 0; // Translate mouse movement to value // Give it some headroom (by increasing clamp range by 1 step) const internalValue = clamp( @@ -135,7 +134,7 @@ export class NumberInput extends Component { // Clamp the final value { state.currentValue = clamp( - round(internalValue / step, 0) * step + stepOffset, + round(internalValue / step, 0) * step , minValue, maxValue, ); From 3dcab1c343f8401f97e6f63d4f96bf2701a1696f Mon Sep 17 00:00:00 2001 From: Kashargul <144968721+Kashargul@users.noreply.github.com> Date: Sat, 7 Sep 2024 18:17:47 +0200 Subject: [PATCH 5/6] fix draggable control input focus --- lib/components/DraggableControl.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/components/DraggableControl.jsx b/lib/components/DraggableControl.jsx index 8b26b16..70add81 100644 --- a/lib/components/DraggableControl.jsx +++ b/lib/components/DraggableControl.jsx @@ -125,12 +125,10 @@ export class DraggableControl extends Component { } else if (this.inputRef) { const input = this.inputRef.current; input.value = internalValue; - // IE8: Dies when trying to focus a hidden element - // (Error: Object does not support this action) - try { + setTimeout(() => { input.focus(); input.select(); - } catch {} + }, 10); } }; } From c91f9e498be0e0451c6b8b4a993e5bfa2f8ec9c4 Mon Sep 17 00:00:00 2001 From: Kashargul <144968721+Kashargul@users.noreply.github.com> Date: Mon, 9 Sep 2024 02:51:17 +0200 Subject: [PATCH 6/6] small oversight --- lib/components/NumberInput.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/components/NumberInput.tsx b/lib/components/NumberInput.tsx index 21ac037..3a92112 100644 --- a/lib/components/NumberInput.tsx +++ b/lib/components/NumberInput.tsx @@ -125,8 +125,9 @@ export class NumberInput extends Component { if (prevState.dragging) { // Translate mouse movement to value // Give it some headroom (by increasing clamp range by 1 step) + const stepSize = stepPixelSize || 1; const internalValue = clamp( - state.currentValue + (offset * step) / (stepPixelSize || 1), + state.currentValue + (offset * step) / stepSize, minValue - step, maxValue + step, ); @@ -141,6 +142,8 @@ export class NumberInput extends Component { } // Set the new origin state.origin = event.screenY; + } else if (Math.abs(offset) > stepSize) { + state.origin = event.screenY; } } else if (Math.abs(offset) > 4) { state.dragging = true;