Merge pull request #3651 from neos/bugfix/rangeeditor_with_float_values

BUGFIX: Allow float numbers in RangeEditor
neos · Nov 5, 2023 · 35e5c51 · 35e5c51
2 parents 74f88b3 + c3ea19c
commit 35e5c51
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/packages/neos-ui-editors/src/Editors/Range/index.js b/packages/neos-ui-editors/src/Editors/Range/index.js
@@ -41,8 +41,9 @@ class RangeEditor extends PureComponent {
     handleChange = event => {
         const {options} = this.props;
         const {target} = event;
+        const useParseInt = (options.step || 1) % 1 === 0;
 
-        let value = parseInt(target.value, 10);
+        let value = useParseInt ? parseInt(target.value, 10) : parseFloat(target.value, 10);
         if (isNaN(value)) {
             return;
         }
@@ -64,7 +65,10 @@ class RangeEditor extends PureComponent {
         const options = {...this.constructor.defaultProps.options, ...this.props.options};
         const {value, highlight} = this.props;
         const valueAsString = value === 0 ? '0' : (value || '');
-        const styleWidth = Math.max(options.min.toString().length, options.max.toString().length) + 'ch';
+        // Calculate the width of the input field based on the length of the min, max and step values
+        const numLength = value => value.toString().length;
+        const additionalStepLength = numLength(options.step) - 1;
+        const styleWidth = Math.max(numLength(options.min), numLength(options.max)) + additionalStepLength + 'ch';
 
         return (
             <div