2

I have the cdkList as a parent component and it has a child where the elements are wrapped in a tag. My issue is that sometimes when I drag the element the underlying link will be grabbed instead of dragging/grabbing the child element/component (pic below). When I change the tag to div or the issues goes away. As these should act as links I can't do that. I also tried with cdkDragHandle and with that the issue was even more frequent.

Here is the parent:

<div (cdkDropListDropped)="favouritesService.drop($event, favourites)" cdkDropList cdkDropListOrientation="vertical">
    <app-favourites
        *ngFor="let favourite of favourites"
        [favouriteName]="favourite.mainFolderName || setFavouriteName(favourite)"
        [favourite]="favourite"
        [stackB64Image]="dataService.getB64Image(stacksService.findStack(favourite.stackId || '')?.thumb_b64)"
        [stackThumbImage]="
            favourite.stackId
                ? stacksService.findStack(favourite.stackId).processedThumbPathGcs ||
                  stacksService.findStack(favourite.stackId).thumbImagePathGcs
                : undefined
        "
        [thumbnailImage]="dataService.setFavouriteThumbnail(favourite)"
    ></app-favourites>
</div>

Here is the child:

<a
    (click)="handleClick()"
    [queryParams]="{
        integrationId: favourite['integrationId'],
        integrationName: favourite['integrationName'],
        conversationId: favourite['conversationId'],
        conversationName: favourite['conversationName'],
        folderId: favourite['folderId'],
        folderName: favourite['folderName'],
        stackId: favourite['stackId'],
        stackName: favourite['stackName'],
        favCatFilter: favourite['favoriteCategoryFilter']
    }"
    [routerLinkActiveOptions]="{ exact: true }"
    [routerLink]="dataService.getRouterLink(favourite)"
    cdkDrag
    class="flex items-center outline-none text-text font-Montserrat-Medium text-sm w-66 h-10 cursor-pointer rounded hover:bg-white-10 focus:outline-none"
    routerLinkActive="rounded bg-black-30"
>
    <img
        [src]="stackB64Image || (stackThumbImage ? (stackThumbImage | getDownloadURL) : thumbnailImage)"
        [style.border-radius]="favourite['stackId'] ? '3px' : ''"
        alt="{{
            favourite['integrationSource'] ||
            favourite['itemType'] ||
            favouriteName ||
            favourite['favoriteCategoryFilter']
                ? favourite['favoriteCategoryFilter']
                : '' + ' logo'
        }}"
        style="margin-left: 15px; margin-right: 9px; width: 26px; height: auto; max-height: 26px; object-fit: cover"
    />
    <p class="cursor-pointer font-Montserrat-Medium text-left text-sm truncate" style="width: 206px">
        {{ favouriteName }}
    </p>
</a>

Picture about the issue:

Wrong element got grabbed

Balu
  • 398
  • 6
  • 15
  • 1
    Our of curiosity, does wrapping your anchor tag in a div tag and applying cdkDrag to the wrapper fixes the issue? Even though it won't answer your question as of "why" this happens, it might be good enough as a temporary workaround. Of course you might have to update the drop handlers as well to support the anchor being nested in the dropped element. – TotallyNewb Aug 25 '21 at 14:51
  • Hi, @TotallyNewb thanks for chipping in. Sadly it did not make any difference, it behaves the same. – Balu Aug 25 '21 at 15:09
  • Hm, I've created a quick stackblitz out of curiosity based on a example from the material docs page and it seems to be working as expected - https://stackblitz.com/edit/angular-pqknr Can you provide a repro on stackblitz? Perhaps it got fixed in the latest cdk version? – TotallyNewb Aug 25 '21 at 18:26
  • I'll try to reproduce it, in the meantime, could you please check the stackblitz link you have shared? I wanted to see what you have come up with, but it seems the link is broken. – Balu Aug 26 '21 at 11:40
  • Sorry, missed a character when selecting for copy-paste. https://stackblitz.com/edit/angular-pqknrn – TotallyNewb Aug 26 '21 at 15:18
  • I've tested it, and it has the same bug in your example as well. https://imgur.com/a/ta1bQob It's happening when you try to grab the element at the link tag. Not always and pretty inconsistent when it happens, but happens. – Balu Aug 27 '21 at 06:20
  • 1
    I just created an issue that might be related to yours https://github.com/angular/components/issues/24403 – Raphiki Feb 13 '22 at 00:04

0 Answers0