Timer counting down went very fast after the clock is blocked by a modal dialog

[jenkins-teamone]

In my code, I pop up a modal dialog in page when a button is clicked that blocks the view of clock. After the modal dialog is dismissed, the counting down time went fast and time even jump back. Do I need to pause the clock before display things on top of it?

[pughpugh]

Hi. I've not seen such a case that would warrant stopping the clock. If possible, you'd have to provide an example to replicate the issue, as it's hard to say what's going on from just a brief description.

[PierreAndreis]

I had this problem. My countdown was going too fast after a callback with different time from a second countdown on the same page was firing the fast paced countdown to start (which was paused from true to false).

I rewrote some of the code on my end, and these are my changes: https://gist.github.com/PierreAndreis/22f69e2fe3bd957cb6ce9d6e38f5247a

PS: I migrated to Class ES6 and ES6.

[cyang78]

I had this problem, too. I'm using antd https://ant.design/components/modal/ to pop up the modal dialog. My snippet is like this:

<div>
             <RequestInfo {...requestInfoProps} />
             <Modal
        visible={modalDialogVisible}
        title="Accept Request"
        onOk={acceptRequestOnOK}
        onCancel={acceptRequestOnCancel}
        footer={[
          <Button
            key="back" size="large"
            onClick={acceptRequestOnCancel}
          >Cancel</Button>,
          <Button
            key="submit" type="primary" size="large"
            loading={modalDialogSubmitInProgress}
            onClick={acceptRequestOnOK}
          >
            Accept
          </Button>,
        ]}
      >

</div>

Where the RequestInfo itself have:

<Row gutter={16} justify="center">
    <Col className={styles.parappa} span={24}>

    {expirationTime  ?
      <ReactCountdownClock seconds={calcCountDown(expirationTime)}
      color="#ff6600"
      timeFormat="hms"
      alpha={0.9}
      size={200}
      weight={20}

      onComplete={myCallback} />
      : ''
    }

    </Col>
    </Row>

After the Modal becomes visible and then invisible again, the clock speed goes crazy. Refresh page again, the clock speed is back to normal

[macabeus]

I have this same problem, but I do not know exactly in what situations this occurs.

[pughpugh]

Hi @macabeus . So far I've been able to replicate one instance where sending new props could double up the tick events. I believe this was fixed in 2.1.0.

I think @PierreAndreis problem is specific to multiple timers on the same page. It's also possible that the component is also no longer mounting and un-mounting cleanly. Both cases need to be investigated further. I'm hoping I can look at this over the xmas holidays.

[cyang78]

Yes, 2.1.0 fixed the issue for me