Dependency arrows get stuck when dragging the successor and drag fails

[ahmadzaheer-dev]

Forum post

Hi Bryntum team,
I encountered this bug where the dependency arrows get stuck when dragging and dropping the successor and the drop fails.

trial\examples\frameworks\react-vite\inline-data\AppConfig.tsx

import { BryntumSchedulerProProjectModelProps, BryntumSchedulerProProps } from '@bryntum/schedulerpro-react';
import { projectData } from './AppData';

export const schedulerProProps : BryntumSchedulerProProps = {
    startDate      : new Date(2023, 6, 30),
    endDate        : new Date(2023, 7, 13),
    tickSize       : 100,
    rowHeight      : 173,
    // Small margin leaves little vertical clearance between the two rows, which makes
    // RectangularPathFinder fail to route the line and fall back to the lineDef adjusters
    resourceMargin : 2,
    rowLines       : false,
    columns        : [
        { text : 'Expedition', field : 'name', width : 200 }
    ],
    nestedEventsFeature : {
        eventLayout             : 'stack',
        headerHeight            : 25,
        allowDeNestingOnDrop    : false,
        constrainResizeToParent : false
    },
    dependenciesFeature : {
        clickWidth        : 5,
        radius            : 5,
        terminalSize      : 16,
        terminalHideDelay : 200,
        showLagInTooltip  : true
        // NOTE: drawAroundParents is intentionally NOT set, i.e. left at its documented default
    },
    dependencyEditFeature : true,
    nonWorkingTimeFeature : false
};

export const projectProps : BryntumSchedulerProProjectModelProps = {
    eventStore   : { tree : true },
    resources    : projectData.resources,
    events       : projectData.events,
    assignments  : projectData.assignments,
    dependencies : projectData.dependencies
};

trial\examples\frameworks\react-vite\inline-data\AppData.ts

// Minimal data set reproducing the nested-events dependency line adjuster RangeError.
// Ids mirror the official "nested-events-dependencies" demo: event 110 -> resource 4 (Mont Blanc),
// event 120 -> resource 5 (Matterhorn), dependency 13 between them (cross-row, required by the bug).
export const projectData = {
    resources : [
        { id : 4, name : 'Mont Blanc' },
        { id : 5, name : 'Matterhorn' }
    ],

events : [
    {
        id       : 110,
        name     : 'Planning',
        children : [
            { id : 111, name : 'Find sponsors', startDate : '2023-08-01', duration : 5, percentDone : 80 },
            { id : 112, name : 'Secure funds', startDate : '2023-08-01', duration : 5, percentDone : 90 },
            { id : 113, name : 'Contract guide', startDate : '2023-08-01', duration : 2, percentDone : 100 }
        ]
    },
    {
        id       : 120,
        name     : 'Planning',
        children : [
            { id : 121, name : 'Find sponsors', startDate : '2023-08-02', duration : 4, percentDone : 40 },
            { id : 122, name : 'Secure funds', startDate : '2023-08-02', duration : 4, percentDone : 20 },
            { id : 123, name : 'Contract guide', startDate : '2023-08-02', duration : 2, percentDone : 10 }
        ]
    }
],

assignments : [
    { id : 110, event : 110, resource : 4 },
    { id : 120, event : 120, resource : 5 }
],

dependencies : [
    // Cross-resource, so generateBoundaryBoxes() populates lineDef.otherBoxes
    { id : 13, from : 110, to : 120 }
]
};

the only deviation from defaults is enabling nestedEvents while leaving dependencies.drawAroundParents unset.

I have attached a video of the bug reproduction as well.

Bryntum Scheduler Pro (trial) 7.3.5
Stack : React 19 + Vite 5, TypeScript
Base : examples/frameworks/react-vite/inline-data from the 7.3.5 trial distribution

dependency.arrow.getting.stuck.mp4

Regards,
amadavan

[zenbanbryntum]

Video Analysis (automated AI-generated transcript)

AI-generated video transcript — produced by extracting and visually analyzing frames from the attached video (1 fps, 31 frames, 31s duration). This is not a human-verified reproduction; please confirm against the live demo.

Video Analysis: Dependency arrow gets stuck / RangeError when dragging successor event onto an invalid (nested-events) drop target

Source: Issue body
Duration: 31s | Frames analyzed: 31 (1 fps)
App under test: "nested events dependency line adjuster RangeError (React + Vite)" — SchedulerPro trial demo, resourceMargin: 2, nestedEventsFeature enabled, cross-resource dependency (id 13, from event 110 to event 120).

Initial State

A SchedulerPro grid with two resource rows, "Mont Blanc" and "Matterhorn". Each row has a top-level "Planning" event (with nested child tasks) spanning roughly a 3–4 day range. A dependency line connects the Mont Blanc "Planning" event to the Matterhorn "Planning" event. On-page instructions read: "Drag the Matterhorn Planning bar to the left, over the Mont Blanc Planning bar, and drop it." Chrome DevTools is open on the right with the Console tab active and empty (no errors yet).

Numbered Reproduction Steps

1. Mouse down / select the Matterhorn "Planning" bar (frame 2, ~2s)
   The user clicks on the Matterhorn row's "Planning" event bar. Resize/drag selection handles appear around it, and a tooltip shows its current date range ("Aug 6, 2023" – "Aug 9, 2023").

2. Row highlighted, drag begins (frame 3, ~3s)
   The Matterhorn row is highlighted (selected), confirming the drag gesture has started on that bar.

3. Drag the bar left across the timeline (frames 4–10, ~4–10s)
   The Matterhorn "Planning" bar is dragged progressively to the left. Successive frames show the live drag tooltip updating the projected date range as the bar moves: "Aug 4"→"Aug 6/9"→"Aug 3/6"→"Aug 2/5"→"Aug 4/7", each time creeping further left and up over the Mont Blanc row's column region (i.e., the successor event is being dragged toward/over the predecessor's event, cross-resource).

4. Drop attempted over the Mont Blanc "Planning" bar — RangeError thrown (frame 11, ~11s)
   As the drag continues (tooltip now "Aug 2, 2023"–"Aug 5, 2023"), an uncaught error appears:

   • An inline error banner appears in the page header area.
   • DevTools Console shows a red error entry with a console error-count badge ("1").
   • Exact console error text: Uncaught (in promise) RangeError: Failed to set the 'length' property on 'Array': Invalid array length — thrown from chunk-PFVQFWT2.js?v=825368f4:127941.

5. "Nesting not allowed" rejection tooltip + first stuck line artifact appears (frame 12, ~12s)
   A "Nesting not allowed" tooltip appears next to the dragged bar (the drop target — nesting onto the Mont Blanc row — is invalid, since allowDeNestingOnDrop is false and the target doesn't accept nesting). At the same moment, a stray rectangular/"L"-shaped line segment appears on the grid (a vertical drop then horizontal segment, positioned around the Matterhorn row near the original drag start column) that was not present in earlier frames. This looks like a frozen/partial dependency-line path left behind mid-computation by the line adjuster / RectangularPathFinder fallback that just crashed.

6. Drag/drop fails, event reverts, but the stuck line remains (frame 13, ~13s)
   The "Nesting not allowed" tooltip disappears and the Matterhorn "Planning" bar snaps back toward its original position (drop rejected, event reverted) — but the stray "L"-shaped line segment from step 5 remains rendered on screen, disconnected from both the reverted bar and any live dependency endpoint.

7. Further interaction does not clear the stuck line (frames 14–19, ~14–19s)
   The user drags the bar again slightly (tooltip "Aug 4, 2023") and opens what appears to be a dependency-edit popover ("From: Planning", "To: Planning", "Lag: 0 days") — likely by clicking on the stuck line/terminal to inspect it. Across all of these subsequent actions, the leftover "L"-shaped line segment stays fixed in the same screen position, confirming it is a rendering artifact that is not cleaned up and does not track the live model state.

8. Developer inspects the error in DevTools Console (frame 20, ~20s)
   The mouse hovers over the red console error line; the stuck dependency-line artifact is still visible in the grid behind DevTools.

9. Developer jumps to the crash site in Sources (frame 22, ~22s)
   Clicking the error's source link (chunk-PFVQFWT2.js?v=825368f4:127941) opens the DevTools Sources panel at that exact line/column (Line 127941, Column 39) inside a minified bundle chunk. The highlighted line performs q["otherBoxes"]["length"] = q[...][...] inside a conditional block that checks nestedEvents and an otherBoxes array — consistent with the dependency line-adjuster / RectangularPathFinder fallback logic mentioned in the issue report, which computes/rewrites an otherBoxes array's length and throws RangeError: Invalid array length when that computed length is invalid (e.g., negative).

10. End state: video ends with DevTools maximized on the crash line (frames 24–30, ~24–30s)
    DevTools is resized wider; the Sources panel remains open on the same file/line (with "This script is on the debugger's ignore list" and "Source map skipped for this file" notices). In the grid behind it, the Matterhorn "Planning" bar sits back at/near its original position, and the stray stuck dependency-line segment from step 5 is still rendered on screen unchanged for the remainder of the recording. No further drag attempts occur before the video ends.

Observed Result

Dragging the successor ("Matterhorn Planning") event onto an invalid drop target (nested onto the "Mont Blanc Planning" row) throws an uncaught RangeError: Failed to set the 'length' property on 'Array': Invalid array length inside the dependency line-adjuster / RectangularPathFinder fallback code (otherBoxes array length computation). The drag/drop itself is correctly rejected ("Nesting not allowed", event reverts), but because the error interrupts the line-redraw routine mid-computation, a stale/partial dependency-arrow path segment is left rendered on screen and never gets cleaned up or redrawn correctly, even after further interaction.

Expected Result

The invalid drop should be rejected cleanly (as the "Nesting not allowed" tooltip indicates), the dragged event should revert, and the dependency line should be redrawn correctly around its (unchanged) endpoints with no leftover artifacts and no uncaught exception in the console.

Key Console / Error Output

Uncaught (in promise) RangeError: Failed to set the 'length' property on 'Array': Invalid array length
    at chunk-PFVQFWT2.js?v=825368f4:127941

Source line inspected in DevTools (minified bundle, line 127941, column 39):

if ((j = k[bNE(2988, 8933)]["nestedEvents"]) == null ? void 0 : j[bNE(2132, 4694)]((q) => {
    if (q[bNF(18171, 25791)]["length"]) {
        q["otherBoxes"]["length"] = q[bNF(18171, 18948)][bNF(8957, ...)]...
    }
    ...

This matches the issue body's hint that a small resourceMargin (2px) leaves little vertical clearance, causing RectangularPathFinder to fail to route the line and fall back to the lineDef adjusters, whose otherBoxes length computation goes out of range during this specific cross-row nested-events drag.

Key Observations

• Product: Bryntum SchedulerPro (nested events + dependencies features)
• Affects: dependency line adjuster / RectangularPathFinder fallback path, triggered during an event drag-drop that gets rejected (nesting not allowed)
• The rejection UX itself (tooltip + revert) works correctly; the bug is specifically the leftover stuck line artifact plus the uncaught RangeError
• Reproducible with: resourceMargin: 2, nestedEventsFeature enabled, dependencies.drawAroundParents left at its default (unset), dragging a cross-resource successor event so it briefly overlaps its predecessor's row/column before the drop is rejected

[zenbanbryntum]

Reproduced with a failing Siesta test.

Test file: SchedulerPro/tests/features/NestedEventsDependencies.t.js (added to the existing Invalid drops describe block)

// https://github.com/bryntum/support/issues/13789
t.it('Should redraw dependency after invalid drop on a parent in another row', async t => {
    await setup({
        startDate      : new Date(2023, 6, 30),
        endDate        : new Date(2023, 7, 13),
        tickSize       : 100,
        rowHeight      : 173,
        resourceMargin : 2,
        rowLines       : false,
        features       : {
            // dependencies.drawAroundParents intentionally left at its default
            nestedEvents : {
                eventLayout             : 'stack',
                headerHeight            : 25,
                allowDeNestingOnDrop    : false,
                constrainResizeToParent : false
            },
            dependencies : true,
            eventTooltip : false
        },
        resources : [
            { id : 4, name : 'Mont Blanc' },
            { id : 5, name : 'Matterhorn' }
        ],
        events : [
            {
                id       : 110,
                name     : 'Planning',
                children : [
                    { id : 111, name : 'Find sponsors', startDate : '2023-08-01', duration : 5 },
                    { id : 112, name : 'Secure funds', startDate : '2023-08-01', duration : 5 },
                    { id : 113, name : 'Contract guide', startDate : '2023-08-01', duration : 2 }
                ]
            },
            {
                id       : 120,
                name     : 'Planning',
                children : [
                    { id : 121, name : 'Find sponsors', startDate : '2023-08-02', duration : 4 },
                    { id : 122, name : 'Secure funds', startDate : '2023-08-02', duration : 4 },
                    { id : 123, name : 'Contract guide', startDate : '2023-08-02', duration : 2 }
                ]
            }
        ],
        assignments : [
            { id : 110, event : 110, resource : 4 },
            { id : 120, event : 120, resource : 5 }
        ],
        dependencies : [
            { id : 13, from : 110, to : 120 }
        ]
    });

    await t.waitForDependencies();

    const
        pathBefore = t.query('.b-sch-dependency:not(.b-click-area)')[0].getAttribute('d'),
        bar        = t.rect('$event=120');

    await t.mouseDown('$event=120');
    await t.moveMouseBy([-20, 0]);

    // Pausing here lets the rAF dependency redraw run while the dragged bar overlaps the
    // predecessor's row but is still resolved to its own row, which is what populates otherBoxes
    await t.moveMouseTo([bar.left - 430, bar.top]);
    await t.waitForAnimations();

    await t.moveMouseTo('$event=110');
    await t.mouseUp();

    await t.waitForSelectorNotFound('.b-aborting');
    await t.waitForAnimations();

    t.selectorCountIs('.b-sch-dependency:not(.b-click-area)', 1, 'Dependency still drawn after the rejected drop');

    t.is(t.query('.b-sch-dependency:not(.b-click-area)')[0]?.getAttribute('d'), pathBefore, 'Dependency line redrawn back to its original path after the rejected drop');
});

Failing output:

fail 1 - Unhandled promise rejection in test NestedEventsDependencies.t.js?features
RangeError: Failed to set the 'length' property on 'Array': Invalid array length
    at Array.<anonymous> (Scheduler/feature/mixin/DependencyLineGenerator.js:536:47)
    at RectangularPathFinder.findPath (Scheduler/util/RectangularPathFinder.js:245:53)
    at Dependencies.getDomConfigs (Scheduler/feature/mixin/DependencyLineGenerator.js:251:56)
    at Dependencies.drawDependency (Scheduler/feature/Dependencies.js:1099:49)
    at Dependencies.draw (Scheduler/feature/Dependencies.js:1228:24)
    at Dependencies.doRefresh [as doRefreshNow] (Scheduler/feature/Dependencies.js:1257:12)
    at Dependencies.rafRefresh [as rafRefreshNow] (Scheduler/feature/Dependencies.js:1297:24)

fail 2 - TEST: features/NestedEventsDependencies.t.js?features
326 passed, 2 failed assertions

Fails identically on 6 consecutive runs — not intermittent. The two explicit assertions lock the fixed behaviour; verified non-vacuous by temporarily initialising nestedStart in the source, which turned the test green (6 passed, 0 failed), then reverting.

Root-cause pointer: In DependencyLineGenerator#prepareLineDef() (Scheduler/lib/Scheduler/feature/mixin/DependencyLineGenerator.js:611), otherBoxes.nestedStart = otherBoxes.length is assigned only inside if (client.features.nestedEvents?.enabled && me.drawAroundParents), but the line-def adjuster installed at line 533 reads it whenever nestedEvents is merely enabled, doing lineDef.otherBoxes.length = lineDef.otherBoxes.nestedStart (line 536). With drawAroundParents at its default (null, Scheduler/feature/Dependencies.js:369) nestedStart is undefined, so that assignment throws RangeError: Invalid array length. The adjuster only runs when RectangularPathFinder.findPath() fails to route a path (RectangularPathFinder.js:245), and it is only reached when otherBoxes is non-empty — which requires a cross-row dependency (line 606). The reporter's resourceMargin : 2 plus the successor bar being dragged so it overlaps the predecessor's row while still resolving to its own row is exactly what makes the router fail, so the throw happens inside the rAF redraw (Dependencies#rafRefreshNow), aborting the draw mid-flight and leaving the stale "L"-shaped line segment on screen.

Two extra notes for whoever picks this up:

• The existing 5-resource fixture in that test file cannot reproduce it. getAssignmentBounds() (lines 409-414) re-resolves the dragged bar's rowTop to whichever row the pointer is over; once the successor fully resolves to the predecessor's row, startRectangle.rowTop === endRectangle.rowTop, otherBoxes stays empty and the adjuster's if (lineDef.otherBoxes.length) guard skips the crash. The reporter's 2-resource dataset is required.
• A plain t.dragBy(...) does not reproduce either — the crash originates in rafRefreshNow, and a continuous synthetic drag coalesces the rAF redraws past the critical position. The explicit mid-drag pause in the test mirrors the pause visible in the reporter's video.