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); } }; } diff --git a/lib/components/NumberInput.tsx b/lib/components/NumberInput.tsx index b0d36f0..3a92112 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'; @@ -123,22 +123,28 @@ 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) - state.currentValue = clamp( - state.currentValue + (offset * step) / (stepPixelSize || 1), + const stepSize = stepPixelSize || 1; + const internalValue = clamp( + state.currentValue + (offset * step) / stepSize, 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( + round(internalValue / step, 0) * step , + minValue, + maxValue, + ); + } + // 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; } @@ -172,7 +178,7 @@ export class NumberInput extends Component { setTimeout(() => { input.focus(); input.select(); - }, 1); + }, 10); } }