diff --git a/components/InputTableField/index.tsx b/components/InputTableField/index.tsx index bffc2efc..98b96558 100644 --- a/components/InputTableField/index.tsx +++ b/components/InputTableField/index.tsx @@ -8,7 +8,7 @@ interface Props { name: string label: string description?: string - value?: number + value: number className?: string imageAlt?: string imageClass?: string @@ -20,8 +20,7 @@ const InputTableField = (props: Props) => { const [value, setValue] = useState(0) useEffect(() => { - if (props.value !== undefined && props.value !== value) - setValue(props.value) + if (props.value) setValue(props.value) }, [props.value]) useEffect(() => { diff --git a/components/SliderTableField/index.tsx b/components/SliderTableField/index.tsx index 941e30b4..abfe428c 100644 --- a/components/SliderTableField/index.tsx +++ b/components/SliderTableField/index.tsx @@ -21,7 +21,7 @@ interface Props { } const SliderTableField = (props: Props) => { - const [value, setValue] = useState(0) + const [value, setValue] = useState(props.value) useEffect(() => { if (props.value !== undefined && props.value !== value) @@ -29,17 +29,21 @@ const SliderTableField = (props: Props) => { }, [props.value]) useEffect(() => { - props.onValueChange(value) + if (value !== props.value) props.onValueChange(value) }, [value]) - function onInputChange(event: React.ChangeEvent) { - setValue(parseInt(event.currentTarget?.value)) + function handleValueCommit(value: number[]) { + setValue(value[0]) } - function onValueChange(value: number[]) { + function handleValueChange(value: number[]) { setValue(value[0]) } + function handleInputChange(event: React.ChangeEvent) { + setValue(parseInt(event.currentTarget?.value)) + } + return ( { max={props.max} step={props.step} value={[value]} - onValueChange={onValueChange} + onValueChange={handleValueChange} + onValueCommit={handleValueCommit} /> { min={props.min} max={props.max} step={props.step} - onChange={onInputChange} + onChange={handleInputChange} /> )