Fix number setting invalid value handling

The component prevented invalid values from being inserted at all, which caused issues with changing values overall.
This commit is contained in:
schroda
2025-06-28 23:39:38 +02:00
parent fd89d80217
commit 008694b670

View File

@@ -25,7 +25,6 @@ import Slider from '@mui/material/Slider';
import DialogContentText from '@mui/material/DialogContentText';
import InfoIcon from '@mui/icons-material/Info';
import { SxProps, Theme } from '@mui/material/styles';
import { coerceIn } from '@/lib/HelperFunctions.ts';
type BaseProps = {
settingTitle: string;
@@ -77,6 +76,9 @@ export const NumberSetting = ({
const [dialogValue, setDialogValue] = useState(value);
const [originalValue, setOriginalValue] = useState(value);
const isInvalid =
(minValue !== undefined && minValue > dialogValue) || (maxValue !== undefined && maxValue < dialogValue);
const updateValue = useCallback(
(newValue: number, persist: boolean) => {
setDialogValue(newValue);
@@ -169,10 +171,11 @@ export const NumberSetting = ({
autoFocus
value={dialogValue}
type="number"
error={isInvalid}
helperText={isInvalid ? t('global.error.label.invalid_input') : ''}
onChange={(e) => {
const newValue = Number(e.target.value);
const newValueCoerced = coerceIn(newValue, minValue ?? newValue, maxValue ?? newValue);
updateValue(newValueCoerced, false);
updateValue(newValue, false);
}}
slotProps={{
input: {
@@ -204,7 +207,7 @@ export const NumberSetting = ({
<Button onClick={cancel} color="primary">
{t('global.button.cancel')}
</Button>
<Button onClick={submit} color="primary">
<Button disabled={isInvalid} onClick={submit} color="primary">
{t('global.button.ok')}
</Button>
</DialogActions>