feat(input-number): add update-value-on-input prop, closes #1664

tusen-ai · Nov 28, 2021 · da13fcf · da13fcf
1 parent bb16820
commit da13fcf
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 4 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -14,6 +14,7 @@
 - Fix `n-scrollbar`'s scrollbar will vanish if clicked.
 - Fix `n-popover` has an invalid line in style.
 - Fix `n-popover` `flip=false` doesn't work.
+- Fix `n-input-number` can't accept indeterminate input value when `max` or `min` is set, closes [#1664](https://github.com/TuSimple/naive-ui/issues/1664).
 
 ### Feats
 
@@ -25,6 +26,7 @@
 - `n-upload` add `custom-request` prop, closes [#1389](https://github.com/TuSimple/naive-ui/issues/1389).
 - `n-data-table` add `expanded-row-keys` prop.
 - `n-popover` provides better auto position adjustment, closes [#1520](https://github.com/TuSimple/naive-ui/issues/1520), [#1643](https://github.com/TuSimple/naive-ui/issues/1643).
+- `n-input-number` add `update-value-on-input` prop, closes [#1662](https://github.com/TuSimple/naive-ui/issues/1662).
 
 ## 2.21.1 (2021-11-23)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -14,6 +14,7 @@
 - 修复 `n-scrollbar` 点击在滚动条上时会消失一次
 - 修复 `n-popover` 样式中有不合法的行
 - 修复 `n-popover` `flip=false` 不生效
+- 修复 `n-input-number` 在设定 `max` 或 `min` 后在输入过程中无法输入中间值，关闭 [#1664](https://github.com/TuSimple/naive-ui/issues/1664)
 
 ### Feats
 
@@ -25,6 +26,7 @@
 - `n-upload` 新增 `custom-request` 属性，关闭 [#1389](https://github.com/TuSimple/naive-ui/issues/1389)
 - `n-data-table` 新增 `expanded-row-keys` 属性
 - `n-popover` 提供更强的自动位置调整能力，关闭 [#1520](https://github.com/TuSimple/naive-ui/issues/1520)、[#1643](https://github.com/TuSimple/naive-ui/issues/1643)
+- `n-input-number` 新增 `update-value-on-input` 属性，关闭 [#1662](https://github.com/TuSimple/naive-ui/issues/1662)
 
 ## 2.21.1 (2021-11-23)
 

diff --git a/src/input-number/demos/enUS/change-timing.demo.md b/src/input-number/demos/enUS/change-timing.demo.md
@@ -0,0 +1,29 @@
+# Timing to change
+
+Set `update-value-on-input` to `false`, the value won't be changed on input.
+
+```html
+<n-space vertical>
+  <n-input-number
+    :update-value-on-input="false"
+    v-model:value="value"
+    placeholder=""
+    :min="20"
+    :max="50"
+  />
+  <n-input-number v-model:value="value" placeholder="" :min="20" :max="50" />
+  {{ value }}
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(35)
+    }
+  }
+})
+```
diff --git a/src/input-number/demos/enUS/index.demo-entry.md b/src/input-number/demos/enUS/index.demo-entry.md
@@ -15,6 +15,7 @@ step
 validator
 show-button
 disable-keyboard
+change-timing
 ```
 
 ## API
@@ -34,6 +35,7 @@ disable-keyboard
 | show-button | `boolean` | `true` | Whether to show increase/decrease buttons. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | The size of input box. |
 | step | `number` | `1` | The number which the current value is increased or decreased on key or button press. It can be an integer or a decimal. |
+| update-value-on-input | `boolean` | `true` | Whether to change the value on input. |
 | validator | `(value) => boolean` | `undefined` | Setup custom validation. |
 | value | `number \| null` | `undefined` | Manually set the input value. |
 | on-blur | `(event: FocusEvent) => void` | `undefined` | Callback triggered when the input is blurred. |

diff --git a/src/input-number/demos/zhCN/change-timing.demo.md b/src/input-number/demos/zhCN/change-timing.demo.md
@@ -0,0 +1,29 @@
+# 改变值的时机
+
+将 `update-value-on-input` 设为 `false`，则在输入的过程中不会改变值。
+
+```html
+<n-space vertical>
+  <n-input-number
+    :update-value-on-input="false"
+    v-model:value="value"
+    placeholder=""
+    :min="20"
+    :max="50"
+  />
+  <n-input-number v-model:value="value" placeholder="" :min="20" :max="50" />
+  {{ value }}
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(35)
+    }
+  }
+})
+```
diff --git a/src/input-number/demos/zhCN/index.demo-entry.md b/src/input-number/demos/zhCN/index.demo-entry.md
@@ -15,6 +15,7 @@ step
 validator
 show-button
 disable-keyboard
+change-timing
 debug
 ```
 
@@ -35,6 +36,7 @@ debug
 | show-button | `boolean` | `true` | 是否有按钮 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 输入框大小 |
 | step | `number` | `1` | 每次改变步数，可以为小数 |
+| update-value-on-input | `boolean` | `true` | 在输入的过程中是否改变值 |
 | validator | `(value) => boolean` | `undefined` | 设置自定义验证 |
 | value | `number \| null` | `undefined` | 受控模式下的值 |
 | on-blur | `(event: FocusEvent) => void` | `undefined` | 移除焦点的回调 |

diff --git a/src/input-number/src/InputNumber.tsx b/src/input-number/src/InputNumber.tsx
@@ -51,6 +51,10 @@ const inputNumberProps = {
     }>,
     default: {}
   },
+  updateValueOnInput: {
+    type: Boolean,
+    default: true
+  },
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
   onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
   onFocus: [Function, Array] as PropType<MaybeArray<(e: FocusEvent) => void>>,
@@ -151,7 +155,8 @@ export default defineComponent({
     }
     const deriveValueFromDisplayedValue = (
       offset = 0,
-      doUpdateIfValid = true
+      doUpdateIfValid = true,
+      applyMinMax = true
     ): null | number | false => {
       const { value: displayedValue } = displayedValueRef
       const parsedValue = parse(displayedValue)
@@ -166,11 +171,13 @@ export default defineComponent({
           const { value: mergedMax } = mergedMaxRef
           const { value: mergedMin } = mergedMinRef
           if (mergedMax !== null && nextValue > mergedMax) {
-            if (!doUpdateIfValid) return false
+            if (!doUpdateIfValid || !applyMinMax) return false
+            // if doUpdateIfValid=true, we try to make it a valid value
             nextValue = mergedMax
           }
           if (mergedMin !== null && nextValue < mergedMin) {
-            if (!doUpdateIfValid) return false
+            if (!doUpdateIfValid || !applyMinMax) return false
+            // if doUpdateIfValid=true, we try to make it a valid value
             nextValue = mergedMin
           }
           if (props.validator && !props.validator(nextValue)) return false
@@ -335,7 +342,9 @@ export default defineComponent({
     }
     function handleUpdateDisplayedValue (value: string): void {
       displayedValueRef.value = value
-      deriveValueFromDisplayedValue()
+      if (props.updateValueOnInput) {
+        deriveValueFromDisplayedValue(0, true, false)
+      }
     }
     watch(mergedValueRef, () => {
       deriveDisplayedValueFromValue()