Our pure JavaScript Scheduler component


Post by omnisip »

drag-and-drop-bug.gif
drag-and-drop-bug.gif (1.86 MiB) Viewed 132 times

Source code / test case example attached. Steps to reproduce:

  1. npm install
  2. npm run start
  3. Start dragging and holding an event element

We identified a problem on our scheduler board when an event element is dragged and held. The issue arises if the event is moved again while an update is in progress. The element continues to display incorrectly, even though it should not. The root cause is unclear, but resolving it is essential as dragging functionality within and outside the grid is necessary. It appears to be a race condition that results in an artifact when a server update coincides with the dragging action.

Attachments
inline-data example_drag-and-drop.zip
(7.66 MiB) Downloaded 7 times
Last edited by omnisip on Wed Jun 12, 2024 9:47 pm, edited 2 times in total.

Post by mats »

What version are you using?


Post by omnisip »

5.6.10


Post by saki »

Confirmed, it is a bug. I have created the issue here: https://github.com/bryntum/support/issues/9383


Post by ghulam.ghous »

Hi @omnisip,

I have debugged this issue and it turns out to be an issue with how you have configured the project on schedulerPro component. You were directly passing the project to the schedulerPro which is not a recommended way and is creating a new project instance on each re-render caused by the useGetEventsQuery hook. We recommend to use BryntumSchedulerProProjectModel or use useState hook to manage the project config and pass the project variable to schedulerPro component.

Approach 1:

Declare a ref for project:

const projectRef = useRef();

Now use BryntumSchedulerProProjectModel:

        <BryntumSchedulerProProjectModel 
            ref={projectRef}
            events={events}
            resources={resources}
        />

// do not pass the assignments as you have already used resourceId on events

and now pass the projectRef to the SchedulerProComponent:

        <BryntumSchedulerPro
            project={projectRef}
            ref={schedulerPro}
       />

Approach 2:

Place the project config inside a useState variable:

const [project, setProject] = useState({ events, resources});

Pass it to the schedulerPro component:

        <BryntumSchedulerPro
            project={project}
            ref={schedulerPro}
       />

And everything works great. We have a docs section here on how to configure things: https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/integration/react/guide#best-practices-for-configuration-management

Updated Project:

Drag_Artifacts-Project.zip
(7.43 MiB) Not downloaded yet

Clip:

Drag Artifacts-clip.zip
(11.37 MiB) Not downloaded yet

Regards,
Ghous


Post Reply