feat: update input-number

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'input', // dev components
+    componentName: 'input-number', // dev components
   },
 };

components/_util/BaseMixin.js

@@ -19,6 +19,7 @@ export default {
       //   Object.assign(newState, this.getDerivedStateFromProps(getOptionProps(this), { ...this.$data, ...newState }, true) || {})
       // }
       Object.assign(this.$data, newState);
+      this.$forceUpdate();
       this.$nextTick(() => {
         callback && callback();
       });

components/input-number/__tests__/__snapshots__/demo.test.js.snap

@@ -4,7 +4,7 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
 <div>
   <div class="ant-input-number">
     <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
-    <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="1" step="1" id="inputNumber" class="ant-input-number-input"></div>
+    <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" autocomplete="off" max="10" min="1" step="1" id="inputNumber" class="ant-input-number-input"></div>
   </div>
   当前值：3
 </div>
@@ -13,7 +13,7 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
 exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
 <div class="ant-input-number">
   <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
-  <div role="spinbutton" aria-valuemin="0" aria-valuemax="10" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="0" step="0.1" class="ant-input-number-input"></div>
+  <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="0" aria-valuemax="10" autocomplete="off" max="10" min="0" step="0.1" class="ant-input-number-input"></div>
 </div>
 `;
 
@@ -21,7 +21,7 @@ exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
 <div>
   <div class="ant-input-number ant-input-number-disabled">
     <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
-    <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" disabled="disabled" max="10" min="1" step="1" class="ant-input-number-input"></div>
+    <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" autocomplete="off" disabled="disabled" max="10" min="1" step="1" class="ant-input-number-input"></div>
   </div>
   <div style="margin-top: 20px;"><button type="button" class="ant-btn ant-btn-primary"><span>Toggle disabled</span></button></div>
 </div>
@@ -31,11 +31,11 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
 <div>
   <div class="ant-input-number">
     <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
-    <div role="spinbutton" aria-valuemin="-9007199254740991" aria-valuenow="1000" class="ant-input-number-input-wrap"><input autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
+    <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="-9007199254740991" aria-valuenow="1000" autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
   </div>
   <div class="ant-input-number">
     <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled" unselectable="unselectable" role="button" aria-label="Increase Value" aria-disabled="true"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
-    <div role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" class="ant-input-number-input-wrap"><input autocomplete="off" max="100" min="0" step="1" class="ant-input-number-input"></div>
+    <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" autocomplete="off" max="100" min="0" step="1" class="ant-input-number-input"></div>
   </div>
 </div>
 `;
@@ -44,15 +44,15 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
 <div>
   <div class="ant-input-number ant-input-number-lg">
     <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
-    <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
+    <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
   </div>
   <div class="ant-input-number">
     <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
-    <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
+    <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
   </div>
   <div class="ant-input-number ant-input-number-sm">
     <div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i aria-label="icon: up" class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i aria-label="icon: down" class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div>
-    <div role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
+    <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="100000" aria-valuenow="3" autocomplete="off" max="100000" min="1" step="1" class="ant-input-number-input"></div>
   </div>
 </div>
 `;

components/input-number/__tests__/index.test.js

@@ -1,4 +1,29 @@
+import { mount } from '@vue/test-utils';
 import InputNumber from '..';
 import focusTest from '../../../tests/shared/focusTest';
+import mountTest from '../../../tests/shared/mountTest';
 
-focusTest(InputNumber);
+describe('InputNumber', () => {
+  focusTest(InputNumber);
+  mountTest(InputNumber);
+
+  // https://github.com/ant-design/ant-design/issues/13896
+  it('should return null when blur a empty input number', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      {
+        render() {
+          return <InputNumber defaultValue="1" onChange={onChange} />;
+        },
+      },
+      {
+        sync: false,
+      },
+    );
+    wrapper.find('input').element.value = '';
+    wrapper.find('input').trigger('input');
+    expect(onChange).toHaveBeenLastCalledWith('');
+    wrapper.find('input').trigger('blur');
+    expect(onChange).toHaveBeenLastCalledWith(null);
+  });
+});

components/input-number/index.en-US.md

@@ -11,15 +11,16 @@
 | parser | Specifies the value extracted from formatter | function( string): number | - |
 | precision | precision of input value | number | - |
 | decimalSeparator | decimal separator | string | - |
-| size | width of input box | string | - |
+| size | height of input box | string | - |
 | step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
 | value(v-model) | current value | number |  |
 
 ### events
 
-| Events Name | Description | Arguments |
+| Events Name | Description | Arguments | Version |
-| --- | --- | --- |
+| --- | --- | --- | --- |
-| change | The callback triggered when the value is changed. | function(value: number \| string) |  |
+| change | The callback triggered when the value is changed. | function(value: number \| string) |  |  |
+| pressEnter | The callback function that is triggered when Enter key is pressed. | function(e) |  | 1.5.0 |
 
 ## Methods
 

components/input-number/index.jsx

@@ -12,7 +12,7 @@ export const InputNumberProps = {
   max: PropTypes.number,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  defaultValue: PropTypes.number,
+  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   tabIndex: PropTypes.number,
   disabled: PropTypes.bool,
   size: PropTypes.oneOf(['large', 'small', 'default']),

components/input-number/index.zh-CN.md

@@ -19,9 +19,10 @@
 
 ### 事件
 
-| 事件名称 | 说明     | 回调参数                          |
+| 事件名称   | 说明           | 回调参数                          | 版本 |
-| -------- | -------- | --------------------------------- |
+| ---------- | -------------- | --------------------------------- | ---- |
-| change   | 变化回调 | Function(value: number \| string) |  |
+| change     | 变化回调       | Function(value: number \| string) |      |
+| pressEnter | 按下回车的回调 | function(e)                       |      |
 
 ## 方法
 

components/vc-input-number/demo/combination-key-format.jsx

@@ -37,6 +37,7 @@ export default {
     return (
       <div style="margin: 10px;">
         <InputNumber
+          aria-label="Number input example that demonstrates combination key format"
           min={-8000}
           max={10000000}
           value={this.value}

components/vc-input-number/src/InputHandler.js

@@ -3,6 +3,7 @@ import Touchable from '../../vc-m-feedback';
 import { getListeners } from '../../_util/props-util';
 
 const InputHandler = {
+  name: 'InputHandler',
   props: {
     prefixCls: PropTypes.string,
     disabled: PropTypes.bool,

components/vc-input-number/src/index.js

@@ -1,4 +1,4 @@
-// based on rc-input-number 4.4.0
+// based on rc-input-number 4.5.5
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
 import { initDefaultProps, hasProp, getOptionProps, getListeners } from '../../_util/props-util';
@@ -35,6 +35,13 @@ const MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || Math.pow(2, 53) - 1;
 
 const isValidProps = value => value !== undefined && value !== null;
 
+const isEqual = (oldValue, newValue) =>
+  newValue === oldValue ||
+  (typeof newValue === 'number' &&
+    typeof oldValue === 'number' &&
+    isNaN(newValue) &&
+    isNaN(oldValue));
+
 const inputNumberProps = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -73,7 +80,7 @@ const inputNumberProps = {
 };
 
 export default {
-  name: 'InputNumber',
+  name: 'VCInputNumber',
   mixins: [BaseMixin],
   model: {
     prop: 'value',
@@ -90,17 +97,18 @@ export default {
     autoComplete: 'off',
   }),
   data() {
+    const props = getOptionProps(this);
+    this.prevProps = { ...props };
     let value;
-    if (hasProp(this, 'value')) {
+    if ('value' in props) {
       value = this.value;
     } else {
       value = this.defaultValue;
     }
-    value = this.toNumber(value);
+    const validValue = this.getValidValue(this.toNumber(value));
-
     return {
-      inputValue: this.toPrecisionAsStep(value),
+      inputValue: this.toPrecisionAsStep(validValue),
-      sValue: value,
+      sValue: validValue,
       focused: this.autoFocus,
     };
   },
@@ -112,19 +120,57 @@ export default {
       this.updatedFunc();
     });
   },
-  beforeUpdate() {
-    this.$nextTick(() => {
-      try {
-        this.start = this.$refs.inputRef.selectionStart;
-        this.end = this.$refs.inputRef.selectionEnd;
-      } catch (e) {
-        // Fix error in Chrome:
-        // Failed to read the 'selectionStart' property from 'HTMLInputElement'
-        // http://stackoverflow.com/q/21177489/3040605
-      }
-    });
-  },
   updated() {
+    const { value, max, min } = this.$props;
+    const { focused } = this.$data;
+    const { prevProps } = this;
+    const props = getOptionProps(this);
+    // Don't trigger in componentDidMount
+    if (prevProps) {
+      if (
+        !isEqual(prevProps.value, value) ||
+        !isEqual(prevProps.max, max) ||
+        !isEqual(prevProps.min, min)
+      ) {
+        const validValue = focused ? value : this.getValidValue(value);
+        let nextInputValue;
+        if (this.pressingUpOrDown) {
+          nextInputValue = validValue;
+        } else if (this.inputting) {
+          nextInputValue = this.rawInput;
+        } else {
+          nextInputValue = this.toPrecisionAsStep(validValue);
+        }
+        this.setState({
+          // eslint-disable-line
+          sValue: validValue,
+          inputValue: nextInputValue,
+        });
+      }
+
+      // Trigger onChange when max or min change
+      // https://github.com/ant-design/ant-design/issues/11574
+      const nextValue = 'value' in props ? value : this.sValue;
+      // ref: null < 20 === true
+      // https://github.com/ant-design/ant-design/issues/14277
+      if (
+        'max' in props &&
+        prevProps.max !== max &&
+        typeof nextValue === 'number' &&
+        nextValue > max
+      ) {
+        this.$emit('change', max);
+      }
+      if (
+        'min' in props &&
+        prevProps.min !== min &&
+        typeof nextValue === 'number' &&
+        nextValue < min
+      ) {
+        this.$emit('change', min);
+      }
+    }
+    this.prevProps = { ...props };
     this.$nextTick(() => {
       this.updatedFunc();
     });
@@ -132,33 +178,6 @@ export default {
   beforeDestroy() {
     this.stop();
   },
-  watch: {
-    value(val) {
-      const value = this.focused ? val : this.getValidValue(val, this.min, this.max);
-      this.setState({
-        sValue: val,
-        inputValue: this.inputting ? value : this.toPrecisionAsStep(value),
-      });
-    },
-    max(val) {
-      const props = getOptionProps(this);
-      // Trigger onChange when max or min change
-      // https://github.com/ant-design/ant-design/issues/11574
-      const nextValue = 'value' in props ? props.value : this.sValue;
-      // ref: null < 20 === true
-      // https://github.com/ant-design/ant-design/issues/14277
-      if (typeof nextValue === 'number' && nextValue > val) {
-        this.__emit('change', val);
-      }
-    },
-    min(val) {
-      const props = getOptionProps(this);
-      const nextValue = 'value' in props ? props.value : this.sValue;
-      if (typeof nextValue === 'number' && nextValue < val) {
-        this.__emit('change', val);
-      }
-    },
-  },
   methods: {
     updatedFunc() {
       const inputElem = this.$refs.inputRef;
@@ -231,6 +250,8 @@ export default {
         const ratio = this.getRatio(e);
         this.down(e, ratio);
         this.stop();
+      } else if (e.keyCode === KeyCode.ENTER) {
+        this.$emit('pressEnter', e);
       }
       // Trigger user key down
       this.recordCursorPosition();
@@ -248,9 +269,9 @@ export default {
       if (this.focused) {
         this.inputting = true;
       }
-      const input = this.parser(this.getValueFromEvent(e));
+      this.rawInput = this.parser(this.getValueFromEvent(e));
-      this.setState({ inputValue: input });
+      this.setState({ inputValue: this.rawInput });
-      this.$emit('change', this.toNumberWhenUserInput(input)); // valid number or invalid string
+      this.$emit('change', this.toNumber(this.rawInput)); // valid number or invalid string
     },
     onFocus(...args) {
       this.setState({
@@ -258,17 +279,20 @@ export default {
       });
       this.$emit('focus', ...args);
     },
-    onBlur(e, ...args) {
+    onBlur(...args) {
       this.inputting = false;
       this.setState({
         focused: false,
       });
       const value = this.getCurrentValidValue(this.inputValue);
-      // todo
+      const newValue = this.setValue(value);
-      // e.persist() // fix https://github.com/react-component/input-number/issues/51
+      if (this.$listeners.blur) {
-      this.setValue(value, () => {
+        const originValue = this.$refs.inputRef.value;
-        this.$emit('blur', e, ...args);
+        const inputValue = this.getInputDisplayValue({ focused: false, sValue: newValue });
-      });
+        this.$refs.inputRef.value = inputValue;
+        this.$emit('blur', ...args);
+        this.$refs.inputRef.value = originValue;
+      }
     },
     getCurrentValidValue(value) {
       let val = value;
@@ -317,8 +341,14 @@ export default {
     },
     setValue(v, callback) {
       // trigger onChange
+      const { precision } = this.$props;
       const newValue = this.isNotCompleteNumber(parseFloat(v, 10)) ? null : parseFloat(v, 10);
-      const changed = newValue !== this.sValue || `${newValue}` !== `${this.inputValue}`; // https://github.com/ant-design/ant-design/issues/7363
+      const { sValue: value = null, inputValue = null } = this.$data;
+      // https://github.com/ant-design/ant-design/issues/7363
+      // https://github.com/ant-design/ant-design/issues/16622
+      const newValueInString =
+        typeof newValue === 'number' ? newValue.toFixed(precision) : `${newValue}`;
+      const changed = newValue !== value || newValueInString !== `${inputValue}`;
       if (!hasProp(this, 'value')) {
         this.setState(
           {
@@ -339,6 +369,7 @@ export default {
       if (changed) {
         this.$emit('change', newValue);
       }
+      return newValue;
     },
     getPrecision(value) {
       if (isValidProps(this.precision)) {
@@ -357,7 +388,7 @@ export default {
     // step={1.0} value={1.51}
     // press +
     // then value should be 2.51, rather than 2.5
-    // if this.props.precision is undefined
+    // if this.$props.precision is undefined
     // https://github.com/react-component/input-number/issues/39
     getMaxPrecision(currentValue, ratio = 1) {
       if (isValidProps(this.precision)) {
@@ -376,8 +407,8 @@ export default {
       const precision = this.getMaxPrecision(currentValue, ratio);
       return Math.pow(10, precision);
     },
-    getInputDisplayValue() {
+    getInputDisplayValue(state) {
-      const { focused, inputValue, sValue } = this;
+      const { focused, inputValue, sValue } = state || this.$data;
       let inputDisplayValue;
       if (focused) {
         inputDisplayValue = inputValue;
@@ -389,7 +420,14 @@ export default {
         inputDisplayValue = '';
       }
 
-      return inputDisplayValue;
+      let inputDisplayValueFormat = this.formatWrapper(inputDisplayValue);
+      if (isValidProps(this.$props.decimalSeparator)) {
+        inputDisplayValueFormat = inputDisplayValueFormat
+          .toString()
+          .replace('.', this.$props.decimalSeparator);
+      }
+
+      return inputDisplayValueFormat;
     },
     recordCursorPosition() {
       // Record position
@@ -407,7 +445,12 @@ export default {
       }
     },
     fixCaret(start, end) {
-      if (start === undefined || end === undefined || !this.input || !this.input.value) {
+      if (
+        start === undefined ||
+        end === undefined ||
+        !this.$refs.inputRef ||
+        !this.$refs.inputRef.value
+      ) {
         return;
       }
 
@@ -433,6 +476,14 @@ export default {
 
       if (index === -1) return false;
 
+      const prevCursorPos = this.cursorBefore.length;
+      if (
+        this.lastKeyCode === KeyCode.DELETE &&
+        this.cursorBefore.charAt(prevCursorPos - 1) === str[0]
+      ) {
+        this.fixCaret(prevCursorPos, prevCursorPos);
+        return true;
+      }
       if (index + str.length === fullStr.length) {
         this.fixCaret(index, index);
 
@@ -463,9 +514,6 @@ export default {
     formatWrapper(num) {
       // http://2ality.com/2012/03/signedzero.html
       // https://github.com/ant-design/ant-design/issues/9439
-      if (isNegativeZero(num)) {
-        return '-0';
-      }
       if (this.formatter) {
         return this.formatter(num);
       }
@@ -476,9 +524,6 @@ export default {
         return num;
       }
       const precision = Math.abs(this.getMaxPrecision(num));
-      if (precision === 0) {
-        return num.toString();
-      }
       if (!isNaN(precision)) {
         return Number(num).toFixed(precision);
       }
@@ -494,48 +539,36 @@ export default {
       );
     },
     toNumber(num) {
-      if (this.isNotCompleteNumber(num)) {
+      const { precision, autoFocus } = this.$props;
+      const { focused = autoFocus } = this;
+      // num.length > 16 => This is to prevent input of large numbers
+      const numberIsTooLarge = num && num.length > 16 && focused;
+      if (this.isNotCompleteNumber(num) || numberIsTooLarge) {
         return num;
       }
-      if (isValidProps(this.precision)) {
+      if (isValidProps(precision)) {
-        return Number(Number(num).toFixed(this.precision));
+        return Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision);
       }
       return Number(num);
     },
-    // '1.0' '1.00'  => may be a inputing number
-    toNumberWhenUserInput(num) {
-      // num.length > 16 => prevent input large number will became Infinity
-      if ((/\.\d*0$/.test(num) || num.length > 16) && this.focused) {
-        return num;
-      }
-      return this.toNumber(num);
-    },
     upStep(val, rat) {
-      const { step, min } = this;
+      const { step } = this;
       const precisionFactor = this.getPrecisionFactor(val, rat);
       const precision = Math.abs(this.getMaxPrecision(val, rat));
-      let result;
+      const result = (
-      if (typeof val === 'number') {
+        (precisionFactor * val + precisionFactor * step * rat) /
-        result = ((precisionFactor * val + precisionFactor * step * rat) / precisionFactor).toFixed(
+        precisionFactor
-          precision,
+      ).toFixed(precision);
-        );
-      } else {
-        result = min === -Infinity ? step : min;
-      }
       return this.toNumber(result);
     },
     downStep(val, rat) {
-      const { step, min } = this;
+      const { step } = this;
       const precisionFactor = this.getPrecisionFactor(val, rat);
       const precision = Math.abs(this.getMaxPrecision(val, rat));
-      let result;
+      const result = (
-      if (typeof val === 'number') {
+        (precisionFactor * val - precisionFactor * step * rat) /
-        result = ((precisionFactor * val - precisionFactor * step * rat) / precisionFactor).toFixed(
+        precisionFactor
-          precision,
+      ).toFixed(precision);
-        );
-      } else {
-        result = min === -Infinity ? -step : min;
-      }
       return this.toNumber(result);
     },
     stepFn(type, e, ratio = 1, recursive) {
@@ -627,16 +660,7 @@ export default {
 
     // focus state, show input value
     // unfocus state, show valid value
-    let inputDisplayValue;
+    const inputDisplayValue = this.getInputDisplayValue();
-    if (this.focused) {
-      inputDisplayValue = this.inputValue;
-    } else {
-      inputDisplayValue = this.toPrecisionAsStep(this.sValue);
-    }
-
-    if (inputDisplayValue === undefined || inputDisplayValue === null) {
-      inputDisplayValue = '';
-    }
 
     let upEvents;
     let downEvents;
@@ -661,12 +685,6 @@ export default {
         mouseleave: this.stop,
       };
     }
-    let inputDisplayValueFormat = this.formatWrapper(inputDisplayValue);
-    if (isValidProps(this.decimalSeparator)) {
-      inputDisplayValueFormat = inputDisplayValueFormat
-        .toString()
-        .replace('.', this.decimalSeparator);
-    }
     const isUpDisabled = !!upDisabledClass || disabled || readOnly;
     const isDownDisabled = !!downDisabledClass || disabled || readOnly;
     const {
@@ -733,14 +751,12 @@ export default {
             )}
           </InputHandler>
         </div>
-        <div
+        <div class={`${prefixCls}-input-wrap`}>
-          class={`${prefixCls}-input-wrap`}
-          role="spinbutton"
-          aria-valuemin={this.min}
-          aria-valuemax={this.max}
-          aria-valuenow={sValue}
-        >
           <input
+            role="spinbutton"
+            aria-valuemin={this.min}
+            aria-valuemax={this.max}
+            aria-valuenow={sValue}
             required={this.required}
             type={this.type}
             placeholder={this.placeholder}
@@ -759,10 +775,11 @@ export default {
             min={this.min}
             step={this.step}
             name={this.name}
+            title={this.title}
             id={this.id}
             onInput={this.onChange}
             ref="inputRef"
-            value={inputDisplayValueFormat}
+            value={inputDisplayValue}
             pattern={this.pattern}
           />
         </div>