Clicking <Stepper> component causes onChange to fire twice.

[kenNg1]

I am trying to implement the Stepper component linking state with redux-form.

My problem is that stepper increments by 2 (that is onChange fires twice) when I click on the plus button. It also decrements by 2 when I click on the minus button. Can you please explain why this is happening and help me to fix it?

NOTE: The problem only seems to occur when I load the web app on my mobile phone and when I emulate a mobile phone in Chrome Dev Tools.

import { WhiteSpace, WingBlank, Card, List, Stepper } from 'antd-mobile';
import { FieldArray } from 'redux-form';
import { Field } from 'redux-form';
import { Fragment } from 'react';
import { lengthOfStays } from 'lib/lengthOfStay';
import { customRadioWrapper, customRadioTablets } from '../css/listingListCss';

const renderChange = (input, id) => value => {
  console.log('renderChange');
  input.onChange({ ...input.value, [id]: value });
};

const renderStepperItems = ({ roomTypes }) => ({ input }) => (
  <List>
    {roomTypes.edges.map(obj => {
      const room = obj.node;
      return (
        <List.Item
          key={room.id}
          wrap
          extra={
            <Stepper
              style={{ width: '100%', minWidth: '100px' }}
              showNumber
              max={10}
              step={1}
              min={room.name === 'Bedroom' ? 1 : 0}
              value={input.value[room.id]}
              onChange={renderChange(input, room.id)}
            />
          }
        >
          {room.name}
        </List.Item>
      );
    })}
  </List>
);

export const FilterStepperRoom = ({ roomTypes }) => (
  <WingBlank size="lg">
    <p className="p text-left margin-left-5">Rooms</p>
    <WhiteSpace size="xs" />
    <div>
      <Field name="roomTypes" component={renderStepperItems({ roomTypes })} />
    </div>
  </WingBlank>
);

Thank you!

[ufohjl]

I got the same problem.

[Faye1208]

me too

[herton7362]

the issue is because of a breaking change in Chrome 56 to improve scroll performance.
the explicit line make the issue happen is
_this.onMouseDown = function (e) {
if (_this.props.onTouchStart) {
_this.triggerEvent('TouchStart', true, e);
}
_this.triggerEvent('MouseDown', true, e);
};
in TouchFeedback.js of rmc-feedback plugin at line 33.
in the chrome device toobar mode will trigger both TouchStart and MouseDown Event ,
and thee.preventDefault is broken in chrome , so that the touchStart will tigger twice
@paranoidjk is this situation an issue?

[beihai1024]

Why don't you solve it for so long?

[wangtao0101]

any progress?

[doxiaodong]

sorry for late. But I can't reappear it on my devices.
According to @herton7362 , try to fix it by upgrading rmc-input-number to 1.0.5 by reinstall dependencies.