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

Event calendars & schedulers
1

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.

“https://vimeo.com/846766009/0bdb4a6062”

Any suggestions?

Andrew

2

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?

3

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:
    image

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

image
image716×464 19 KB

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,

Andrew

6

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

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

7

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.

8

Hi Zoli,

That fixed it. Thanks for the prompt help!

Andrew

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