diff --git a/src/components/ui/form-numeric-input.tsx b/src/components/ui/form-numeric-input.tsx index 9e19316..7c2890a 100644 --- a/src/components/ui/form-numeric-input.tsx +++ b/src/components/ui/form-numeric-input.tsx @@ -128,6 +128,18 @@ const FormNumericInput = React.forwardRef( const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { e.preventDefault() + + // Check if we're at min/max before allowing arrow key navigation + const numValue = Number(value) + const hasValidNumber = !isNaN(numValue) && value !== '' + + if (e.key === 'ArrowDown' && hasValidNumber && numValue <= min) { + return // Don't decrement if at min + } + if (e.key === 'ArrowUp' && hasValidNumber && numValue >= max) { + return // Don't increment if at max + } + updateValue(e.key === 'ArrowUp' ? 1 : -1) } } @@ -179,6 +191,12 @@ const FormNumericInput = React.forwardRef( } } + // Determine if buttons should be disabled based on current value and min/max + const numValue = Number(value) + const hasValidNumber = !isNaN(numValue) && value !== '' + const isAtMin = hasValidNumber && numValue <= min + const isAtMax = hasValidNumber && numValue >= max + return (
@@ -192,6 +210,7 @@ const FormNumericInput = React.forwardRef( hasWarning && !hasError && "border-yellow-500" )} onClick={() => updateValue(-1)} + disabled={isAtMin} tabIndex={-1} > @@ -224,6 +243,7 @@ const FormNumericInput = React.forwardRef( hasWarning && !hasError && "border-yellow-500" )} onClick={() => updateValue(1)} + disabled={isAtMax} tabIndex={-1} >