diff --git a/docs/demo/wheel.tsx b/docs/demo/wheel.tsx
new file mode 100644
index 00000000..84b2b70e
--- /dev/null
+++ b/docs/demo/wheel.tsx
@@ -0,0 +1,17 @@
+/* eslint no-console:0 */
+import InputNumber from 'rc-input-number';
+import React from 'react';
+import '../../assets/index.less';
+
+export default () => {
+ return (
+
+
+
+ );
+};
diff --git a/docs/example.md b/docs/example.md
index 77dc42ef..72af5617 100644
--- a/docs/example.md
+++ b/docs/example.md
@@ -41,4 +41,8 @@ nav:
+## wheel
+
+
+
diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx
index 2e92ff95..bbf83115 100644
--- a/src/InputNumber.tsx
+++ b/src/InputNumber.tsx
@@ -76,7 +76,7 @@ export interface InputNumberProps
upHandler?: React.ReactNode;
downHandler?: React.ReactNode;
keyboard?: boolean;
- wheel?: boolean;
+ changeOnWheel?: boolean;
/** Parse display value to validate number */
parser?: (displayValue: string | undefined) => T;
@@ -118,7 +118,7 @@ const InternalInputNumber = React.forwardRef(
upHandler,
downHandler,
keyboard,
- wheel,
+ changeOnWheel = false,
controls = true,
classNames,
@@ -510,24 +510,23 @@ const InternalInputNumber = React.forwardRef(
};
React.useEffect(() => {
- const onWheel = (event) => {
- if (wheel === false) {
- return;
+ if (changeOnWheel && focus) {
+ const onWheel = (event) => {
+ // moving mouse wheel rises wheel event with deltaY < 0
+ // scroll value grows from top to bottom, as screen Y coordinate
+ onInternalStep(event.deltaY < 0);
+ event.preventDefault();
+ };
+ const input = inputRef.current;
+ if (input) {
+ // React onWheel is passive and we can't preventDefault() in it.
+ // That's why we should subscribe with DOM listener
+ // https://stackoverflow.com/questions/63663025/react-onwheel-handler-cant-preventdefault-because-its-a-passive-event-listenev
+ input.addEventListener('wheel', onWheel, { passive: false });
+ return () => input.removeEventListener('wheel', onWheel);
}
- // moving mouse wheel rises wheel event with deltaY < 0
- // scroll value grows from top to bottom, as screen Y coordinate
- onInternalStep(event.deltaY < 0);
- event.preventDefault();
- };
- const input = inputRef.current;
- if (input) {
- // React onWheel is passive and we can't preventDefault() in it.
- // That's why we should subscribe with DOM listener
- // https://stackoverflow.com/questions/63663025/react-onwheel-handler-cant-preventdefault-because-its-a-passive-event-listenev
- input.addEventListener('wheel', onWheel, { passive: false });
- return () => input.removeEventListener('wheel', onWheel);
}
- }, [onInternalStep]);
+ });
// >>> Focus & Blur
const onBlur = () => {
diff --git a/tests/wheel.test.tsx b/tests/wheel.test.tsx
index 8356129c..07707c42 100644
--- a/tests/wheel.test.tsx
+++ b/tests/wheel.test.tsx
@@ -5,14 +5,16 @@ import { fireEvent, render } from './util/wrapper';
describe('InputNumber.Wheel', () => {
it('wheel up', () => {
const onChange = jest.fn();
- const { container } = render();
+ const { container } = render();
+ fireEvent.focus(container.firstChild);
fireEvent.wheel(container.querySelector('input'), {deltaY: -1});
expect(onChange).toHaveBeenCalledWith(1);
});
it('wheel up with pressing shift key', () => {
const onChange = jest.fn();
- const { container } = render();
+ const { container } = render();
+ fireEvent.focus(container.firstChild);
fireEvent.keyDown(container.querySelector('input'), {
which: KeyCode.SHIFT,
key: 'Shift',
@@ -25,14 +27,16 @@ describe('InputNumber.Wheel', () => {
it('wheel down', () => {
const onChange = jest.fn();
- const { container } = render();
+ const { container } = render();
+ fireEvent.focus(container.firstChild);
fireEvent.wheel(container.querySelector('input'), {deltaY: 1});
expect(onChange).toHaveBeenCalledWith(-1);
});
it('wheel down with pressing shift key', () => {
const onChange = jest.fn();
- const { container } = render();
+ const { container } = render();
+ fireEvent.focus(container.firstChild);
fireEvent.keyDown(container.querySelector('input'), {
which: KeyCode.SHIFT,
key: 'Shift',
@@ -45,18 +49,26 @@ describe('InputNumber.Wheel', () => {
it('disabled wheel', () => {
const onChange = jest.fn();
- const { container } = render();
+ const { container, rerender } = render();
+ fireEvent.focus(container.firstChild);
fireEvent.wheel(container.querySelector('input'), {deltaY: -1});
expect(onChange).not.toHaveBeenCalled();
fireEvent.wheel(container.querySelector('input'), {deltaY: 1});
expect(onChange).not.toHaveBeenCalled();
+
+ rerender();
+ fireEvent.focus(container.firstChild);
+
+ fireEvent.wheel(container.querySelector('input'), {deltaY: 1});
+ expect(onChange).toHaveBeenCalledWith(-1);
});
it('wheel is limited to range', () => {
const onChange = jest.fn();
- const { container } = render();
+ const { container } = render();
+ fireEvent.focus(container.firstChild);
fireEvent.keyDown(container.querySelector('input'), {
which: KeyCode.SHIFT,
key: 'Shift',