Premium support for our pure JavaScript UI components


Post by mightym »

I encountered a strange issue while using Scheduler Pro and my external data sources.
This is basically my Scheduler setup:

<BryntumSchedulerPro
    ref={schedulerProRef}
    {...schedulerProConfig}
    events={eventData?.results ?? []}
    resources={resourceData?.results ?? []}
/>

where

eventData

and

resourceData

are arrays of objects coming from my API via react query.

When I load the page everythings fine. First time the array is empty -> data gets loaded -> array is populated -> Resources and Events are rendered in the scheduler. Perfect!

But when I now leave the page (via react router without a page reload) and come back (the scheduler gets remounted, resourceData.results and eventData.results are populated via the api) the scheduler is empty. Is it possible that the scheduler has an issue with getting an empty array initially? Do I somehow maybe have to pass a loading state when using a external data source?

EDIT: I just realize that due to react query's caching the data isn't even empty when the scheduler is remounting, hmmm.


Post by mats »

Any chance you can drop us a test case so we can inspect?


Post by mightym »

I will try to create a smaller setup where I can reproduce the issue. The current setup is really complicated.

But just to ensure: having external datasource like in my example is fine and there is nothing else I missed when using external datasource (special settings, passing in some state about the source ) ?


Post by marcio »

Hey mightym,

The code that you shared looks correct at first sight, but as Mats suggested, could be something else that is related to your project configuration, so we would need to inspect that to confirm if it's a bug on our side or not.

Best regards,
Márcio


Post by mightym »

Hey marcio, hey mats.
I found the issue. This is less about the data itself. And not related to react query (I'm currently using hardcoded data to ensure this has nothing todo with async stuff). Its about the fact that I'm using

eventRenderer

with a react component.

Initially the event from the scheduler itself is there. Start and End Date are correct. But my react component is not rendered. I'm not seeing anything as I removed all the scheduler styles from the event as I rely on my own styles via my react component. As soon as I eg click on a date bar at the top the component gets rendered. Creating Events works, there the react component gets rendered and also suddenly all my other events also appear.

I attached 2 screenshots. Hope my explanation was not too confusing :)

Attachments
2.png
2.png (194.4 KiB) Viewed 598 times
1.png
1.png (198.08 KiB) Viewed 598 times

Post by mightym »

At least I found a dirty fix for now. If I don't supply initial data to the scheduler and wait a few milliseconds events get rendered like expected. Anyway maybe you guys have a hint how the intended way is how to handle that issue. Thanks in advance!


Post by mightym »

Nevermind, as soon as my data changes I have the same issue again. I also tried loading data like this:

      
schedulerProRef.current.instance.eventStore.on({ loadDateRange(e) { if (e.changed) { refetchData(); } }, });

Also cause that my react event component doesn't get rendered.

Without custom event renderer everything works like expected.

Maybe my usecase (external data source + custom event rendering) is too specific and not covered by scheduler pro.


Post by alex.l »

Hi mightym,

That sounds like a bug we just fixed. It will be available with the nearest patch release. But to make sure I am right, it will be great to get a test case for testing.
Or you can wait for next release and check with your application and give us feedback if it fixed or not.

All the best,
Alex


Post by mightym »

Hey Alex!
I just installed 5.3.1 and it solved the issue with react components disappearing when they leave the viewport.
But it didn't fix my main issue that initially the custom react components inside the events aren't rendered.
I still need manually force a rerender of the scheduler (eg. by creating manually a new event in the grid or by double clicking the time axis) or refetch my data with a timeout.

Btw. is there any other way to check if the scheduler is initialized than checking if my ref.instance is there? Maybe that would also be at least a quick fix to ensure everything gets rendered correct.

Edit: I just encountered another issue with the custom eventRenderer, while resizing the event the react component gets constantly mounted and remounted. This cause the event to flicker all the time as long as you resize. I just realized this because while resizing the element <div class="b-jsx-container b-event-text-wrap" role="presentation"></div> constantly has a child or not.
This also happens in https://www.bryntum.com/products/schedulerpro/examples-scheduler/frameworks/react/javascript/react-events/build/


Post by saki »

I'm checking the issues from the beginning and I'll comment on them:

But when I now leave the page (via react router without a page reload) and come back (the scheduler gets remounted, resourceData.results and eventData.results are populated via the api) the scheduler is empty.

We do not have a concept of "remounting" in the scheduler. React routing (usually) effectively means destroying the scheduler. Routing back therefore needs to recreate the instance completely, including the (loading of) data.

I'm not seeing anything as I removed all the scheduler styles from the event as I rely on my own styles via my react component.

This could be a problem. Some internals are dependent on css classes.

At least I found a dirty fix for now. If I don't supply initial data to the scheduler and wait a few milliseconds events get rendered like expected.

This should not be necessary. We have some demos with initial data so this misbehavior is puzzling at the first hear.

I could reproduce the flickering (destroying/re-creating) of React components while resizing so I've created the issue https://github.com/bryntum/support/issues/6426

To investigate and fix or explain the other issues we really need a showcase that we can run locally, that demonstrates the problems and that we can edit/debug. Post please such (w/o node_modules folder).


Post Reply