Skip to content

Commit

Permalink
fix: Control dynamic change value when user typing should work (#362)
Browse files Browse the repository at this point in the history
* test: Test driven

* test: Test driven

* fix: check diff logic
  • Loading branch information
zombieJ committed Sep 28, 2021
1 parent 83e3c22 commit f8acf87
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 1 deletion.
3 changes: 3 additions & 0 deletions docs/demo/debug.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## debug

<code src="../examples/debug.tsx">
40 changes: 40 additions & 0 deletions docs/examples/debug.tsx
Original file line number Diff line number Diff line change
@@ -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<string | number>(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 (
<>
<InputNumber
style={{ width: 100 }}
onChange={(nextValue) => {
console.log('Change:', nextValue);
setValue(nextValue);
}}
value={value}
/>
{value}
<button
onClick={() => {
setValue(99);
}}
>
Change
</button>
</>
);
};
4 changes: 3 additions & 1 deletion src/InputNumber.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
26 changes: 26 additions & 0 deletions tests/github.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<string | number>(7);

React.useEffect(() => {
if (value) {
setVal(value);
}
}, [value]);

return <InputNumber value={val} onChange={setVal} />;
};
const wrapper = mount(<Demo />);

// 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');
});
});

1 comment on commit f8acf87

@vercel
Copy link

@vercel vercel bot commented on f8acf87 Sep 28, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.