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',