Fix scroll in input randomly not working and number inputs missing (#9161)

newIDE/app/src/ObjectEditor/Editors/Cube3DEditor.js

@@ -133,8 +133,12 @@ const Cube3DEditor = ({
                 commitOnBlur
                 floatingLabelFixed
                 floatingLabelText={property.getLabel()}
-                onChange={value => onChangeProperty(propertyName, value)}
+                onChange={value => {
+                  if (isNaN(parseFloat(value))) return;
+                  onChangeProperty(propertyName, value);
+                }}
                 value={property.getValue()}
+                type="number"
                 endAdornment={
                   <Tooltip title={endAdornment.tooltipContent}>
                     <InputAdornment position="end">

newIDE/app/src/ObjectEditor/Editors/Model3DEditor.js

@@ -540,6 +540,7 @@ const Model3DEditor = ({
             <SemiControlledTextField
               floatingLabelFixed
               floatingLabelText={<Trans>Scaling factor</Trans>}
+              type="number"
               onChange={value => setScale(parseFloat(value) || 0)}
               value={
                 scale === null ? '' : removeTrailingZeroes(scale.toPrecision(5))

newIDE/app/src/ObjectEditor/Editors/PropertyFields.js

@@ -33,6 +33,10 @@ export const PropertyField = ({
 
   const updateProperty = React.useCallback(
     (value: string) => {
+      // The user is probably still typing (a sign or a dot): the value is
+      // reverted if they leave the field.
+      if (isNaN(parseFloat(value))) return;
+
       const oldValue = objectConfiguration
         .getProperties()
         .get(propertyName)
@@ -69,6 +73,7 @@ export const PropertyField = ({
         floatingLabelText={property.getLabel()}
         onChange={updateProperty}
         value={property.getValue()}
+        type="number"
         endAdornment={
           <Tooltip title={endAdornment.tooltipContent}>
             <InputAdornment position="end">{endAdornment.label}</InputAdornment>

newIDE/app/src/ObjectEditor/Editors/SimpleTileMapEditor.js

@@ -183,6 +183,7 @@ const SimpleTileMapEditor = ({
           floatingLabelFixed
           floatingLabelText={<Trans>Tile size</Trans>}
           id="tileSize"
+          type="number"
           onChange={value => setTileSize(Math.max(parseInt(value, 10) || 0, 0))}
           value={tileSize.toString()}
         />

newIDE/app/src/UI/TextField.js

@@ -261,6 +261,28 @@ const TextField: React.ComponentType<{
     getCaretPosition,
   }));
 
+  // Chromium steps a focused number input on wheel, but before Chromium 152 the
+  // wheel event is not blocking, so the scrollable parent scrolls at the same time.
+  // A non-passive listener makes the event blocking, so the native handling
+  // prevents the scroll.
+  // See https://issues.chromium.org/issues/40709742 and https://issues.chromium.org/issues/40859979
+  // (fixed in Chromium 152 by https://chromium-review.googlesource.com/c/chromium/src/+/7901499).
+  // This can be removed once Electron ships Chromium 152+ (Electron 44).
+  const isNumberInput = props.type === 'number';
+  React.useEffect(
+    () => {
+      const input = inputRef.current;
+      if (!input || !isNumberInput) return;
+
+      const noop = () => {};
+      input.addEventListener('wheel', noop, { passive: false });
+      return () => {
+        input.removeEventListener('wheel', noop, { passive: false });
+      };
+    },
+    [isNumberInput]
+  );
+
   const onChange = props.onChange || undefined;
 
   const helperText = props.helperMarkdownText ? (