cbaoth/med-plan-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update number inupt max/min value now disables +/- buttons respectively

Browse Source
This commit is contained in:
Andreas Weyer
2026-02-07 10:27:11 +00:00
parent 383fd928d1
commit f76cb81108
1 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ui/form-numeric-input.tsx
View File

@@ -128,6 +128,18 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
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<HTMLInputElement, NumericInputProps>(
}
}
// 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 (
<div ref={containerRef} className={cn("relative flex items-center gap-2", className)}>
<div className="flex items-center">
@@ -192,6 +210,7 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
hasWarning && !hasError && "border-yellow-500"
)}
onClick={() => updateValue(-1)}
disabled={isAtMin}
tabIndex={-1}
>
<Minus className="h-4 w-4" />
@@ -224,6 +243,7 @@ const FormNumericInput = React.forwardRef<HTMLInputElement, NumericInputProps>(
hasWarning && !hasError && "border-yellow-500"
)}
onClick={() => updateValue(1)}
disabled={isAtMax}
tabIndex={-1}
>
<Plus className="h-4 w-4" />