Timeline "Dynamically Color and Validate" example freezes when used in React

Hi There,

I’m seeing a problem when running your standard “dynamically color and validate” example in React.

Happens on Chrome, Firefox and Edge browsers. I’m using “@mobiscroll/react”: “^5.25.1”, and “react”: “^18.2.0”.

To make sure it wasn’t surrounding code, I copied the example code exactly “as-is” into my App.

Here is a video of the “freeze” I’m seeing.


Any suggestions?


Hi @Andrew1 :wave:

I tried with the same React and Mobiscroll versions and for me, worked as expected, without any freezing issue.

Can you share a working example from which I can see the exact usage and reproduce this issue?

Hi Zsombor,

Thanks for taking a look so quickly. I was able to reproduce by doing the following:

  1. Creating a new react application using create-react-app

  2. Installing the mobiscroll cli and running “mobiscroll config react”

  3. Updating App.js to contain the following:

  4. Creating DnyColor (this is the exact code used in the demonstration). Note using mobiscroll.min.css.

I hope this helps. Let me know if there is an easier way for me to share this example with you, and I will do it.

Thanks again,


I’ve posted a test case to a public github repository, hopefully to make this easier to test.

See: https://github.com/sanfordandrew/mobibug

Hi @Andrew1

Thanks a lot for the repository. I was able to reproduce the issue and the fix is to move out the Task function from the DynColor function. It is a separate component, but when you nest it inside the DynColor function it will trigger a state change when it is not supposed to.

Let me know if that fixes the problem!

PS: I also wanted to push a fix branch to the repo but I was denied access, so I hope the above explains how to fix it.

Hi Zoli,

That fixed it. Thanks for the prompt help!


p.s. You guys may want to update the showcase/example code with this correction :slight_smile: