[REACT] Manually updating nested child event does not render correctly

[ewu]

Goal: We want to round a drop to the nearest quarter-day increment, excluding our lunch hour, non-working time, and non-working days.

Expectation: On drop, the task(s) will round to the nearest quarter-day working time

Actuals: If you drag and drop any child task that is not the starting child task, it reverts to its original position. The event store correctly batches the changes and syncs with our server, but the UI will briefly render the correct date before jumping the task back to its original position. There is also a jittering when you drop a parent task as well (it's not as noticeable in this example, but in our large data-set with custom JSX rendering, it is very apparent).

nested-child-task-doesn't-render-updates.mov

(8.75 MiB) Downloaded 14 times

For our attempt at the quarter-day rounding, we manually set the start date for the dropped tasks in our onBeforeEventDropFinalize handler after calling context.finalize(false).

// Round drop date to quarter day
onBeforeEventDropFinalize({ source, context }: BeforeEventDropEvent) {
  context.async = true;
  if (!context.valid) {
    context.finalize(false);
  } else {
    const { events: drops, assignments } = context.dropData;
    const dropAssignments = Object.fromEntries(
      assignments.map(({ assignmentRecord, resourceRecord }) => [
        assignmentRecord.eventId,
        resourceRecord.id,
      ])
    );
    const calendar = source.project.calendar as CalendarModel;
    source.suspendRefresh();
    context.finalize(false);
    source.eventStore.beginBatch();

for (const { eventRecord: task, startDate } of drops) {
  const adjustedStart = roundDatetimeToQuarterDay(startDate);
  const adjustedEnd = calendar.calculateEndDate(
    adjustedStart,
    task.durationMS
  );
  const stageUnit = dropAssignments[task.id];
  task.set({
    startDate: adjustedStart,
    endDate: adjustedEnd,
    resourceId: stageUnit,
  });
  if (task.isParent) {
    for (const child of task.children as SchedulerEventModel[]) {
      child.set({ resourceId: stageUnit });
    }
  }
}
source.eventStore.endBatch();
source.resumeRefresh(true);
  }
}

I can reproduce this your examples/frameworks/react-vite/nested-events-lazy-load example and attached that here:

nested-event-does-not-update-on-drop.zip

(9.11 MiB) Downloaded 8 times

I modified it by:

• Changing the data set to have the parent tasks constrained by its children
• Adding a working time calendar
• Adding the onBeforeEventDropFinalize handler

[marcio]

Hey ewu,

Thanks for reaching out and for the detailed explanation and example.

I created a ticket to investigate that, as it looks like a wrong behavior on our side. We'll have someone from our dev team to look into that https://github.com/bryntum/support/issues/11319.

[ewu]

Thanks Marcio. Do you have any suggestions on how to force a rerender of the parent task and all its children as a workaround until this is fixed?

[marcio]

Hey ewu,

As a workaround, you can try manually refreshing the UI by calling the refresh method on the scheduler instance after updating the events. This should force a rerender of the parent task and its children. Here's a small modification to your existing code:

source.eventStore.endBatch();
source.resumeRefresh(true);

// Force a UI refresh
source.refresh();

This should help in ensuring that the UI reflects the updated state of the tasks.

If that doesn't help, I'm afraid you'll need to wait for the ticket to be fixed.

[ewu]

source.refresh() didn't work. I also tried manually refreshing the row calling source.refreshResources(resources), to no effect.

[alex.l]

Hi,

Yep, it didn't work correct actually. We have to wait for ticket I am afraid, we have no ideas how to patch it before tech team dive into the problem.