diff --git a/docs/demo/debug.md b/docs/demo/debug.md new file mode 100644 index 00000000..27706ef0 --- /dev/null +++ b/docs/demo/debug.md @@ -0,0 +1,3 @@ +## debug + + diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx new file mode 100644 index 00000000..6212b9df --- /dev/null +++ b/docs/examples/debug.tsx @@ -0,0 +1,40 @@ +/* eslint no-console:0 */ +import React, { useEffect } from 'react'; +import InputNumber from 'rc-input-number'; +import '../../assets/index.less'; + +export default () => { + const [value, setValue] = React.useState(5); + + useEffect(() => { + function keyDown(event: KeyboardEvent) { + if ((event.ctrlKey === true || event.metaKey) && event.keyCode === 90) { + setValue(3); + } + } + document.addEventListener('keydown', keyDown); + + return () => document.removeEventListener('keydown', keyDown); + }, []); + + return ( + <> + { + console.log('Change:', nextValue); + setValue(nextValue); + }} + value={value} + /> + {value} + + + ); +}; diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 7cab51d1..e9914912 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -477,9 +477,11 @@ const InputNumber = React.forwardRef( const newValue = getMiniDecimal(value); setDecimalValue(newValue); + const currentParsedValue = getMiniDecimal(mergedParser(inputValue)); + // When user typing from `1.2` to `1.`, we should not convert to `1` immediately. // But let it go if user set `formatter` - if (newValue.isNaN() || !userTypingRef.current || formatter) { + if (!newValue.equals(currentParsedValue) || !userTypingRef.current || formatter) { // Update value as effect setInputValue(newValue, userTypingRef.current); } diff --git a/tests/github.test.tsx b/tests/github.test.tsx index 19c4c38f..e616c0dc 100644 --- a/tests/github.test.tsx +++ b/tests/github.test.tsx @@ -475,4 +475,30 @@ describe('InputNumber.Github', () => { expect(wrapper.getInputValue()).toEqual('-0'); }); + + // https://github.com/ant-design/ant-design/issues/32274 + it('global modify when typing', () => { + const Demo = ({ value }: { value?: number }) => { + const [val, setVal] = React.useState(7); + + React.useEffect(() => { + if (value) { + setVal(value); + } + }, [value]); + + return ; + }; + const wrapper = mount(); + + // Click + wrapper.find('.rc-input-number-handler-up').simulate('mouseDown'); + expect(wrapper.find('input').prop('value')).toEqual('8'); + + // Keyboard change + wrapper.find('input').simulate('keyDown'); + wrapper.setProps({ value: 3 }); + wrapper.update(); + expect(wrapper.find('input').prop('value')).toEqual('3'); + }); });