Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(cdk/drag-drop): resolve helper directives with DI for proper hostDirectives support #28633

Merged
merged 1 commit into from
Feb 26, 2024

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Feb 23, 2024

Currently CdkDrag resolves its helper directives (e.g. handle or preview) using a content query, but that doesn't work when it's applied as a host directive, because no content is being projected.

These changes switch to having the helper directives inject the closest drag directive and register themselves manually.

Fixes #28614.

@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Feb 23, 2024
…Directives support

Currently `CdkDrag` resolve its helper directives (e.g. handle or preview) using a content query, but that doesn't work when it's applied as a host directive, because no content is being projected.

These changes switch to having the helper directives inject the closest drag directive and register themselves manually.

Fixes angular#28614.
@crisbeto crisbeto force-pushed the 28614/drag-drop-host-dir branch from 2bd958f to f3c571d Compare February 23, 2024 14:21
@crisbeto crisbeto removed the request for review from andrewseguin February 26, 2024 13:45
@crisbeto crisbeto self-assigned this Feb 26, 2024
@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Feb 26, 2024
@crisbeto crisbeto merged commit ef68e32 into angular:main Feb 26, 2024
24 of 26 checks passed
crisbeto added a commit that referenced this pull request Feb 26, 2024
…Directives support (#28633)

Currently `CdkDrag` resolve its helper directives (e.g. handle or preview) using a content query, but that doesn't work when it's applied as a host directive, because no content is being projected.

These changes switch to having the helper directives inject the closest drag directive and register themselves manually.

Fixes #28614.

(cherry picked from commit ef68e32)
@sdoyle0
Copy link

sdoyle0 commented Mar 17, 2024

I think the changes in this commit may have caused a dependency injection issue when combining virtual scroll and drag and drop. I've setup a very minimal StackBlitz example to show the issue here: https://stackblitz.com/edit/f2xpkk. If you load the example as it is currently with version 17.2.2, you'll see the following stack trace:
vendor.js:47027 ERROR NullInjectorError: R3InjectorError(Standalone[CdkVirtualScrollAppendOnlyExample])[InjectionToken CDK_DRAG_PARENT -> InjectionToken CDK_DRAG_PARENT -> InjectionToken CDK_DRAG_PARENT]: NullInjectorError: No provider for InjectionToken CDK_DRAG_PARENT! at NullInjector.get (vendor.js:44290:21) at R3Injector.get (vendor.js:44741:27) at R3Injector.get (vendor.js:44741:27) at R3Injector.get (vendor.js:44741:27) at ChainedInjector.get (vendor.js:55693:32) at lookupTokenUsingModuleInjector (vendor.js:46282:31) at getOrCreateInjectable (vendor.js:46328:10) at ɵɵdirectiveInject (vendor.js:49755:17) at ɵɵinject (vendor.js:43467:59) at inject (vendor.js:43550:10)

If you go to package.json and set all the angular packages to 17.2.1 and refresh, the page will load with no issues. Is this expected or intentional based on the layout of the component?

crisbeto added a commit to crisbeto/material2 that referenced this pull request Mar 20, 2024
…eholder

Fixes a regression from angular#28633 where using `cdkDragPlaceholder` or `cdkDragPreview` without a `cdkDrag` would throw. Technically this is a no-op, but it appears that folks started depending on the old behavior so these changes bring it back.

Fixes angular#28744.
crisbeto added a commit that referenced this pull request Mar 20, 2024
…eholder (#28750)

Fixes a regression from #28633 where using `cdkDragPlaceholder` or `cdkDragPreview` without a `cdkDrag` would throw. Technically this is a no-op, but it appears that folks started depending on the old behavior so these changes bring it back.

Fixes #28744.
crisbeto added a commit that referenced this pull request Mar 20, 2024
…eholder (#28750)

Fixes a regression from #28633 where using `cdkDragPlaceholder` or `cdkDragPreview` without a `cdkDrag` would throw. Technically this is a no-op, but it appears that folks started depending on the old behavior so these changes bring it back.

Fixes #28744.

(cherry picked from commit 9343131)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 17, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(CdkDrag, CdkDragHandle): CdkDragHandle doesn't work when CdkDrag is set to host element
3 participants