more fixes

Author: lars-petter-hauge

frontend/src/components/Simulation/ModelInputs.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { ChangeEvent, useEffect, useState } from "react";
 import { ModelConfig } from "@/dto/FormConfig";
 import { Accordion, Autocomplete, Button, NativeSelect, TextField, Typography } from "@equinor/eds-core-react";
 import { MetaTooltip } from "@/functions/Tooltip";
@@ -116,6 +116,25 @@ function GridRangeInput({ candidateSubstances }: { candidateSubstances: string[]
     const axis = axes[0];
     const isActive = axis !== undefined;
 
+    const [minStr, setMinStr] = useState(axis?.range.min.toString() ?? "");
+    const [maxStr, setMaxStr] = useState(axis?.range.max.toString() ?? "");
+    const [stepsStr, setStepsStr] = useState(axis?.range.steps.toString() ?? "");
+
+    useEffect(() => {
+        if (axis) {
+            setMinStr(axis.range.min.toString());
+            setMaxStr(axis.range.max.toString());
+            setStepsStr(axis.range.steps.toString());
+        }
+    }, [axis?.substance]);
+
+    const commitRange = (field: "min" | "max" | "steps", raw: string) => {
+        if (!axis) return;
+        const v = Number(raw);
+        if (Number.isNaN(v)) return;
+        updateAxis(0, { range: { ...axis.range, [field]: v } });
+    };
+
     const headerText = isActive
         ? `Concentration range: ${optionName(axis.substance)}`
         : "Concentration range";
@@ -159,8 +178,9 @@ function GridRangeInput({ candidateSubstances }: { candidateSubstances: string[]
                                     step="any"
                                     min={0}
                                     max={PPM_MAX}
-                                    value={axis.range.min}
-                                    onChange={(e: ChangeEvent<HTMLInputElement>) => updateAxis(0, { range: { ...axis.range, min: e.target.valueAsNumber } })}
+                                    value={minStr}
+                                    onChange={(e: ChangeEvent<HTMLInputElement>) => setMinStr(e.target.value)}
+                                    onBlur={() => commitRange("min", minStr)}
                                     variant={axis.range.max > axis.range.min ? undefined : "error"}
                                 />
                                 <TextField
@@ -171,8 +191,9 @@ function GridRangeInput({ candidateSubstances }: { candidateSubstances: string[]
                                     step="any"
                                     min={0}
                                     max={PPM_MAX}
-                                    value={axis.range.max}
-                                    onChange={(e: ChangeEvent<HTMLInputElement>) => updateAxis(0, { range: { ...axis.range, max: e.target.valueAsNumber } })}
+                                    value={maxStr}
+                                    onChange={(e: ChangeEvent<HTMLInputElement>) => setMaxStr(e.target.value)}
+                                    onBlur={() => commitRange("max", maxStr)}
                                     variant={axis.range.max > axis.range.min ? undefined : "error"}
                                     helperText={axis.range.max > axis.range.min ? undefined : "'To' must be greater than 'From'"}
                                 />
@@ -183,8 +204,9 @@ function GridRangeInput({ candidateSubstances }: { candidateSubstances: string[]
                                     step={1}
                                     min={2}
                                     max={25}
-                                    value={axis.range.steps}
-                                    onChange={(e: ChangeEvent<HTMLInputElement>) => updateAxis(0, { range: { ...axis.range, steps: e.target.valueAsNumber } })}
+                                    value={stepsStr}
+                                    onChange={(e: ChangeEvent<HTMLInputElement>) => setStepsStr(e.target.value)}
+                                    onBlur={() => commitRange("steps", stepsStr)}
                                 />
                             </>
                         )}