fix(input-number): cannot input decimal (#1117)

* fix: input-number cannot enter decimal

* fix: add more case

* Update src/input-number/src/InputNumber.tsx

Co-authored-by: yugang.cao <yugang.cao@tusimple.ai>
Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -11,6 +11,8 @@
 ### Fixes
 
 - Fix `n-step` doesn't work with `v-for` children.
+- Fix `n-step` cannot enter decimals when `step` is not a decimal.
+
 
 ## 2.18.0 (2021-09-07)
 

CHANGELOG.zh-CN.md

@@ -11,6 +11,7 @@
 ### Fixes
 
 - 修复 `n-step` 无法使用 `v-for` 的子元素
+- 修复 `n-step` 在 `step` 不为小数时不能输入小数
 
 ## 2.18.0 (2021-09-07)
 

src/input-number/src/InputNumber.tsx

@@ -94,13 +94,13 @@ export default defineComponent({
       uncontrolledValueRef
     )
     const displayedValueRef = ref('')
-    const precisionRef = computed(() => {
-      const precisions = [props.min, props.max, props.step].map((item) => {
+    const getMaxPrecision = (currentValue: number): number => {
+      const precisions = [props.min, props.max, props.step, currentValue].map((item) => {
         const fraction = String(item).split('.')[1]
         return fraction ? fraction.length : 0
       })
       return Math.max(...precisions)
-    })
+    }
     const mergedPlaceholderRef = useMemo(() => {
       const { placeholder } = props
       if (placeholder !== undefined) return placeholder
@@ -150,7 +150,8 @@ export default defineComponent({
         return null
       }
       if (validator(parsedValue)) {
-        let nextValue = parseFloat((parsedValue + offset).toFixed(precisionRef.value))
+        const precision = getMaxPrecision(parsedValue)
+        let nextValue = parseFloat((parsedValue + offset).toFixed(precision))
         if (validator(nextValue)) {
           const { value: mergedMax } = mergedMaxRef
           const { value: mergedMin } = mergedMinRef

src/input-number/tests/InputNumber.spec.tsx

@@ -95,4 +95,32 @@ describe('n-input-number', () => {
     }
     expect(addBtn.classes()).toContain('n-button--disabled')
   })
+
+  it('should work with decimal value', async () => {
+    const wrapper = mount(NInputNumber, {
+      attachTo: document.body,
+      props: {
+        defaultValue: 0
+      }
+    })
+    wrapper.find('input').element.value = '0.22'
+    await wrapper.find('input').trigger('input')
+    await wrapper.find('input').trigger('blur')
+    expect(wrapper.find('input').element.value).toEqual('0.22')
+    await wrapper.setProps({ step: 2 })
+    wrapper.find('input').element.value = '0.3333'
+    await wrapper.find('input').trigger('input')
+    await wrapper.find('input').trigger('blur')
+    expect(wrapper.find('input').element.value).toEqual('0.3333')
+    const addBtn = wrapper.findAll('.n-input__suffix > button')[1]
+    await addBtn.trigger('click')
+    expect(wrapper.find('input').element.value).toEqual('2.3333')
+    await wrapper.setProps({ step: 2.333333 })
+    await addBtn.trigger('click')
+    expect(wrapper.find('input').element.value).toEqual('4.666633')
+    await wrapper.setProps({ step: 2.33 })
+    await addBtn.trigger('click')
+    expect(wrapper.find('input').element.value).toEqual('6.996633')
+    wrapper.unmount()
+  })
 })