fix(config): support more values for the useSharedArrayBuffer (#3688)

platform/ui/src/components/InputNumber/InputNumber.tsx

@@ -43,11 +43,13 @@ const InputNumber: React.FC<{
   showAdjustmentArrows = true,
 }) => {
   const [numberValue, setNumberValue] = useState(value);
+  const [isFocused, setIsFocused] = useState(false);
 
   const maxDigits = getMaxDigits(maxValue, step);
   const inputWidth = Math.max(maxDigits * 10, showAdjustmentArrows ? 20 : 28);
   const arrowWidth = showAdjustmentArrows ? 20 : 0;
   const containerWidth = `${inputWidth + arrowWidth}px`;
+  const decimalPlaces = Number.isInteger(step) ? 0 : step.toString().split('.')[1].length;
 
   useEffect(() => {
     setNumberValue(value);
@@ -81,8 +83,17 @@ const InputNumber: React.FC<{
     onChange(newValue);
   };
 
-  const increment = () => updateValue(numberValue + step);
-  const decrement = () => updateValue(numberValue - step);
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    setNumberValue(parseFloat(numberValue).toFixed(decimalPlaces));
+  };
+
+  const increment = () => updateValue(parseFloat(numberValue) + step);
+  const decrement = () => updateValue(parseFloat(numberValue) - step);
 
   return (
     <div className="flex flex-1 flex-col">
@@ -101,8 +112,10 @@ const InputNumber: React.FC<{
         <div className="flex">
           <input
             type="number"
-            value={numberValue}
+            value={isFocused ? numberValue : parseFloat(numberValue).toFixed(decimalPlaces)}
             step={step}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
             onChange={handleChange}
             className={'input-number w-full bg-black text-center text-[12px] text-white'}
             style={{ width: inputWidth }}

platform/ui/src/components/InputNumber/__stories__/inputNumber.stories.mdx

@@ -34,10 +34,10 @@ InputNumber is a component that allows you to use as a number value
   <Story
     name="Overview"
     args={{
-      step: 1,
-      value: 1000,
-      minValue: 0,
-      maxValue: 1000,
+      step: 0.5,
+      value: 15,
+      minValue: 0.5,
+      maxValue: 99.5,
       size: 'sm',
       showAdjustmentArrows: true,
       onChange: () => console.log('input range change'),