fix: unable to input decimals in distance input

Author: guansss

src/components/editor/NumericInput2.tsx

@@ -3,6 +3,7 @@ import {
   NumericInput,
   NumericInputProps,
 } from '@blueprintjs/core'
+import { useRef, useState } from 'react'
 
 type MixedNumericInputProps = HTMLInputProps & NumericInputProps
 
@@ -13,20 +14,34 @@ export interface NumericInput2Props extends MixedNumericInputProps {
 export const NumericInput2 = ({
   intOnly,
   min,
+  minorStepSize,
+  value,
   onValueChange,
   ...props
 }: NumericInput2Props) => {
   const allowNegative = min === undefined || min < 0
 
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [endsWithDot, setEndsWithDot] = useState(false)
+
+  if (minorStepSize && minorStepSize < 0.001) {
+    // not yet fixed in current version: https://github.com/palantir/blueprint/issues/4497
+    process.env.NODE_ENV === 'development' &&
+      console.warn('minorStepSize cannot be smaller than 0.001')
+
+    minorStepSize = 0.001
+  }
+
   return (
     <NumericInput
       allowNumericCharactersOnly
       min={min}
+      minorStepSize={minorStepSize}
+      inputRef={inputRef}
+      value={endsWithDot ? value + '.' : value}
+      onBlur={() => setEndsWithDot(false)}
+      onButtonClick={(num, str) => onValueChange?.(num, str, inputRef.current)}
       onValueChange={(num, str, inputEl) => {
-        if (!onValueChange) {
-          return
-        }
-
         // count hyphens to determine the sign, so that user can toggle the sign
         // by pressing hyphen key, regardless of the cursor position
         let hyphens = 0
@@ -36,6 +51,14 @@ export const NumericInput2 = ({
           return ''
         })
 
+        const dots = str.split('.').length - 1
+
+        if (dots > 1 || (dots === 1 && intOnly)) {
+          return
+        }
+
+        setEndsWithDot(str.endsWith('.'))
+
         num = parseFloat(str)
 
         if (Number.isNaN(num) || !Number.isFinite(num)) {
@@ -50,7 +73,7 @@ export const NumericInput2 = ({
           num = ~~num
         }
 
-        onValueChange(num, str, inputEl)
+        onValueChange?.(num, str, inputEl)
       }}
       {...props}
     />

src/components/editor/action/EditorActionDistance.tsx

@@ -71,11 +71,10 @@ export const EditorActionDistance = ({
     >
       <div className="flex">
         <NumericInput2
-          intOnly
           selectAllOnFocus
           className="mr-2"
           placeholder="X 距离"
-          minorStepSize={0.5}
+          stepSize={0.5}
           onValueChange={(value) => onChange(transform.fromX(value))}
           onBlur={onBlur}
           value={value?.[0]?.toString() ?? ''}
@@ -88,10 +87,9 @@ export const EditorActionDistance = ({
         />
 
         <NumericInput2
-          intOnly
           selectAllOnFocus
           placeholder="Y 距离"
-          minorStepSize={0.5}
+          stepSize={0.5}
           onValueChange={(value) => onChange(transform.fromY(value))}
           onBlur={onBlur}
           value={value?.[1]?.toString() ?? ''}

src/components/editor/operator/EditorOperatorSkillTimes.tsx

@@ -22,6 +22,7 @@ export const EditorOperatorSkillTimes = <
 
   return (
     <NumericInput2
+      intOnly
       defaultValue={0}
       onValueChange={(val) => onChange(Math.min(val, 100))}
       onBlur={onBlur}