Fix twitchy defaults on number inputs

This commit is contained in:
Connor Yoh 2025-08-18 15:41:45 +01:00
parent c936e36590
commit 66b610e201

View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useState, useEffect } from "react";
import { Stack, Text, NumberInput } from "@mantine/core"; import { Stack, Text, NumberInput } from "@mantine/core";
interface NumberInputWithUnitProps { interface NumberInputWithUnitProps {
@ -20,14 +20,26 @@ const NumberInputWithUnit = ({
max, max,
disabled = false disabled = false
}: NumberInputWithUnitProps) => { }: NumberInputWithUnitProps) => {
const [localValue, setLocalValue] = useState<number | string>(value);
// Sync local value when external value changes
useEffect(() => {
setLocalValue(value);
}, [value]);
const handleBlur = () => {
onChange(localValue);
};
return ( return (
<Stack gap="xs" style={{ flex: 1 }}> <Stack gap="xs" style={{ flex: 1 }}>
<Text size="xs" fw={500} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> <Text size="xs" fw={500} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{label} {label}
</Text> </Text>
<NumberInput <NumberInput
value={value} value={localValue}
onChange={onChange} onChange={setLocalValue}
onBlur={handleBlur}
min={min} min={min}
max={max} max={max}
disabled={disabled} disabled={disabled}