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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user