#5175 - fontsz float

packages/ketcher-react/src/script/ui/component/form/Input/Input.tsx

@@ -77,13 +77,21 @@ export function GenericInput({
 
 GenericInput.val = function (ev, schema) {
   const input = ev.target;
+  const isInteger = schema && schema.type === 'integer';
+  const isFloat = schema && schema.type === 'number';
+
   const isNumber =
-    input.type === 'number' ||
-    input.type === 'range' ||
-    (schema && (schema.type === 'number' || schema.type === 'integer'));
+    input.type === 'number' || input.type === 'range' || isInteger || isFloat;
+
   const value = isNumber ? input.value.replace(/,/g, '.') : input.value;
 
-  return isNumber && !isNaN(value - 0) ? value - 0 : value; // eslint-disable-line
+  if (isInteger) {
+    return Number(value) || 0;
+  }
+
+  // When the value can be a float the validation is passed to the parent component
+  // because it's more complicated
+  return value;
 };
 
 function TextArea({

packages/ketcher-react/src/script/ui/component/form/MeasureInput/measure-input.jsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  ***************************************************************************/
 
+import { useState, useEffect } from 'react';
 import clsx from 'clsx';
 
 import Input from '../Input/Input';
@@ -37,11 +38,28 @@ const MeasureInput = ({
   className,
   ...rest
 }) => {
+  const [internalValue, setInternalValue] = useState(value);
+
+  useEffect(() => {
+    const parsedInternalValue = parseFloat(internalValue);
+
+    if (!isNaN(parsedInternalValue)) {
+      onChange(parsedInternalValue);
+    }
+  }, [internalValue]);
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
   const handleChange = (value) => {
-    const isNumber = !isNaN(Number(value));
+    const endorcedValue = value || 0;
+    const isNumber = !isNaN(parseFloat(endorcedValue));
+
+    console.log(parseFloat(endorcedValue));
 
     if (isNumber) {
-      onChange(value);
+      setInternalValue(endorcedValue);
     }
   };
 
@@ -55,7 +73,7 @@ const MeasureInput = ({
     <div className={clsx(styles.measureInput, className)} {...rest}>
       <span>{rest.title || desc.title}</span>
       <div style={{ display: 'flex' }}>
-        <Input schema={schema} step={1} value={value} onChange={handleChange} />
+        <Input schema={schema} value={internalValue} onChange={handleChange} />
         <Select
           onChange={handleMeasChange}
           options={selectOptions}

packages/ketcher-react/src/script/ui/data/schema/options-schema.ts

@@ -192,7 +192,7 @@ const render: {
   },
   fontsz: {
     title: 'Font size',
-    type: 'integer',
+    type: 'number',
     default: 13,
     minimum: 1,
     maximum: 96,