Updating tasks in onBeforeTaskEdit is not possible if returning false

[taauntik]

Forum post

Hello,
We use React and store tasks in the component's state of our application and use inline data feature to pass tasks to the Gantt component.
We have a requirement to display a custom window instead of the Task Edit window when a user click the Edit button on a task. And we also need to update tasks in this case. So we use onBeforeTaskEdit event and update tasks state in this event. But we noticed that after calling 'return false' on the function for this event (we call it to prevent showing the "Task Edit" window), the tasks changes rollback to the initial state which was before update.
The onAfterTaskEdit event works properly for us but it is called only when the Task Edit window has been closed but we want to hide it.
So my question is how can we prevent rollback changes for tasks in the beforeTaskEdit event and hide Task Edit window at the same time?

---

You could reproduce it locally here Gantt\examples\frameworks\react\javascript\inline-data

1. Open App.js file
2. Add beforeTaskEdit handler

            <BryntumGantt
                ref={gantt}
                {...ganttConfig}
                // add onBeforeTaskEdit listener
                onBeforeTaskEdit={handler}
                project={project}
            />

3. And this is how the handler looks like

    const handler = useCallback(() => {
        setTasks([
            {
                id       : 1,
                name     : 'Task 1',
                expanded : true,
                children : [
                    { id : 11, name : 'Subtask 11', percentDone : 30, duration : 10 },
                    { id : 12, name : 'Subtask 12', percentDone : 67, duration : 5 }
                ]
            },
            {
                id       : 2,
                name     : 'Task 2',
                expanded : true,
                children : [
                    { id : 21, name : 'Subtask 21', percentDone : 14, duration : 3 },
                    { id : 22, name : 'Subtask 22', percentDone : 94, duration : 7 },
                    { id : 23, name : 'Subtask 23', percentDone : 7, duration : 8 }
                ]
            }
        ]);
        setDependencies([
            { id : 1, from : 11, to : 12 },
            { id : 2, from : 1, to : 21 },
            { id : 3, from : 21, to : 22 },
            { id : 4, from : 21, to : 23 }
        ]);
        setTimeRanges([
            {
                id           : 1,
                name         : 'Important date',
                startDate    : DateHelper.add(DateHelper.clearTime(new Date()), 15, 'day'),
                duration     : 0,
                durationUnit : 'd',
                cls          : 'b-fa b-fa-diamond'
            }
        ]);
        return false;
    }, [])

4. Then double click on a task you'll see it revert the changes back

chrome_M9IWMGAPgL.mp4

[Jmurawsk]

@taauntik any news in this item ? It's very important for us.

[matsbryntse]

@Jmurawsk We'll try to take a look soon. We haven't seen this before though, can you please explain the use case and why tasks need to change before you edit?

[taauntik]

#7130

[Jmurawsk]

@matsbryntse We would like to replace Bryntum Gantt Editor for tasks and place our Custom Editor. After implementation when we open our custom editor and save the data we observed our changes are not reflected in the Gantt. We can see new data are updated for a second in the Gantt and then disappear with previous data.

[matsbryntse]

Replacing the Gantt editor is reasonable yes, but why load new data into the Gantt when editing starts. What's the reasoning behind it?

After implementation when we open our custom editor and save the data we observed our changes are not reflected in the Gantt.

This sounds like the root cause to investigate, likely the custom editor is not properly implemented when it comes to writing data to the task being edited.

[Jmurawsk]

@matsbryntse We would like to take new data and show them in Gantt because we made change in data structure. Previously I checked if maybe we can use onAfterTaskEdit event but unfortunately it was not triggered in this case.

[matsbryntse]

Ok so to sum up, after you have finished editing in your custom editor, the data is not updated in the Gantt - correct? Then it would be better to focus on fixing that issue. And then this issue would not matter I suppose? If you could open a ticket in our forum to share your code of how you do your custom editor - we can try to review and see how to fix it.

[Jmurawsk]

@matsbryntse we provided reproducible scenario in this item https://forum.bryntum.com/viewtopic.php?p=126442#p126442

[matsbryntse]

I believe we're missing your custom editor where the data saving isn't working properly.

[Andemki]

@matsbryntse It was me who created this support request on the Bryntum forum. And we don't need any custom editors at all to reproduce this issue. I've provided 4 clear steps how to rerpoduce this issue from the initial Bryntum Gantt setup and also provided my question about it (https://forum.bryntum.com/viewtopic.php?p=126442#p126442):

So my question is how can we prevent rollback changes for tasks in the beforeTaskEdit event and hide Task Edit window at the same time?

Then @taauntik has confirmed that he was able to reproduce this issue based on my 4 steps which I provided in the forum and created this GitHub's issue. And you can find the reproducible scenario by @taauntik in the very first message of this GitHub's issue.
It seems that return false statement in the function which is bound to the beforeTaskEdit reverts tasks changes made in this function. (please see an exampe from the first message here)
So I have the same question: Is it somehow possible to hide Gantt edit window without reverting the tasks state changes in the beforeTaskEdit function ?

[matsbryntse]

We’d first like to understand why you would want to load new data into the Gantt when editing starts. Never seen anyone do this

[Andemki]

We’d first like to understand why you would want to load new data into the Gantt when editing starts. Never seen anyone do this

Please consider the folowing scenario: a user clicks the Edit button and then the app recieves the tasks updates via the API call.
What we need here is just to hide Gantt Edit window and display tasks updates on the UI.

[matsbryntse]

Ok, thanks for clarifying. Fix/test added, waiting for test suite results.