Skip to content

Elements removed from DOM using @for and SSR #53163

@divvjson

Description

@divvjson

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

Elements are removed from the DOM when they are reordered using the Material DragDropModule.

It seems like this issue only occurs when using the new @for syntax in conjunction with SSR enabled.

So, if I use *ngFor or disable SSR this issue does not occur.

The reordering example is the same as on the official docs: https://material.angular.io/cdk/drag-drop/overview#reordering-lists

There's no error in the console.

drag-drop-bug.mp4

Please provide a link to a minimal reproduction of the bug

DragDropBug

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.0.3
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

Angular: 17.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.3
@angular-devkit/build-angular   17.0.3
@angular-devkit/core            17.0.3
@angular-devkit/schematics      17.0.3
@angular/cdk                    17.0.1
@angular/cli                    17.0.3
@angular/material               17.0.1
@angular/ssr                    17.0.3
@schematics/angular             17.0.3
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else?

No response

Metadata

Metadata

Assignees

Labels

P2The issue is important to a large percentage of users, with a workaroundarea: coreIssues related to the framework runtimecore: control flowIssues related to the built-in control flow (@if, @for, @switch)core: hydrationstate: has PR

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions