fix(inputnumber): button right click bug (#540)

packages/semi-foundation/inputNumber/constants.ts

@@ -10,6 +10,7 @@ const numbers = {
     DEFAULT_SHIFT_STEP: 1,
     DEFAULT_PRESS_TIMEOUT: 250,
     DEFAULT_PRESS_INTERVAL: 0,
+    MOUSE_BUTTON_LEFT: 0, // left mouse button
 };
 
 const strings = {

packages/semi-foundation/inputNumber/foundation.ts

@@ -4,7 +4,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import keyCode from '../utils/keyCode';
 import { numbers } from './constants';
-import { toNumber, toString } from 'lodash';
+import { toNumber, toString, get } from 'lodash';
 import { minus as numberMinus } from '../utils/number';
 
 export interface InputNumberAdapter extends DefaultAdapter {
@@ -286,6 +286,9 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleUpClick(event: any) {
+        if (!this._isMouseButtonLeft(event)) {
+            return;
+        }
         this._adapter.setClickUpOrDown(true);
         if (event) {
             event.persist();
@@ -303,6 +306,9 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
     }
 
     handleDownClick(event: any) {
+        if (!this._isMouseButtonLeft(event)) {
+            return;
+        }
         this._adapter.setClickUpOrDown(true);
         if (event) {
             event.persist();
@@ -317,6 +323,14 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         });
     }
 
+    /**
+     * Whether it is a left mouse button click
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+     */
+    _isMouseButtonLeft(event: any) {
+        return get(event, 'button') === numbers.MOUSE_BUTTON_LEFT;
+    }
+
     _preventDefault(event: any) {
         const keepFocus = this._adapter.getProp('keepFocus');
         if (keepFocus) {

packages/semi-ui/inputNumber/__test__/inputNumber.test.js

@@ -5,6 +5,7 @@ import sinon from 'sinon';
 import keyCode from '@douyinfe/semi-foundation/utils/keyCode';
 import * as _ from 'lodash';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { numbers } from '@douyinfe/semi-foundation/inputNumber/constants';
 import { Form, withField } from '../../index';
 
 const log = (...args) => console.log(...args);
@@ -216,8 +217,8 @@ describe(`InputNumber`, () => {
         const addCount = 3;
         const minusCount = 1;
 
-        _.times(addCount, () => addBtn.simulate('mousedown'));
-        _.times(minusCount, () => minusBtn.simulate('mousedown'));
+        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
+        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
 
         expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
         expect(onUpClick.called).toBe(true);
@@ -243,8 +244,8 @@ describe(`InputNumber`, () => {
         const addCount = 3;
         const minusCount = 1;
 
-        _.times(addCount, () => addBtn.simulate('mousedown'));
-        _.times(minusCount, () => minusBtn.simulate('mousedown'));
+        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
+        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
 
         expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
         expect(onUpClick.called).toBe(true);
@@ -283,9 +284,9 @@ describe(`InputNumber`, () => {
         // click button focus
         const addCount = 3;
         const minusCount = 1;
-        _.times(addCount, () => addBtn.simulate('mousedown'));
+        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
         _.times(addCount, () => addBtn.simulate('mouseup'));
-        _.times(minusCount, () => minusBtn.simulate('mousedown'));
+        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
         _.times(minusCount, () => minusBtn.simulate('mouseup'));
         expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
         expect(inputNumber.find(BaseInputNumber).state('focusing')).toBeTruthy();
@@ -338,7 +339,7 @@ describe(`InputNumber`, () => {
         const btns = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number-suffix-btns .${BASE_CLASS_PREFIX}-input-number-button`);
         const inputElem = inputNumber.find('input');
         const addBtn = btns.first();
-        addBtn.simulate('mousedown');
+        addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT });
         expect(inputElem.instance().value).toBe("1");
     })
 
@@ -366,5 +367,32 @@ describe(`InputNumber`, () => {
         inputElem.simulate('change', newEvent);
         expect(onNumberChange.calledOnce).toBe(true);
         expect(inputElem.instance().value).toBe('123');
-    })
+    });
+
+    /**
+     * test buttons right click
+     */
+     it(`right click add/minus button`, async () => {
+        const defaultValue = 1000;
+        const onUpClick = sinon.spy();
+        const onDownClick = sinon.spy();
+        const MOUSE_BUTTON_RIGHT = 2;
+
+        const inputNumber = mount(
+            <InputNumber defaultValue={defaultValue} onUpClick={onUpClick} onDownClick={onDownClick} />
+        );
+        const inputElem = inputNumber.find('input');
+
+        const btns = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number-suffix-btns .${BASE_CLASS_PREFIX}-input-number-button`);
+
+        const addBtn = btns.first();
+        const minusBtn = btns.last();
+
+        _.times(1, () => addBtn.simulate('mousedown', { button: MOUSE_BUTTON_RIGHT  }));
+        _.times(3, () => minusBtn.simulate('mousedown', { button: MOUSE_BUTTON_RIGHT }));
+
+        expect(inputElem.instance().value).toBe(String(defaultValue));
+        expect(onUpClick.called).toBe(false);
+        expect(onDownClick.called).toBe(false);
+    });
 });