Commits

Tim Donohue authored and GitHub committed 6bcac36c14d Merge
Merge pull request #3654 from 4Science/task/dspace-8_x/DURACOM-302_2

#3624 - Fix Multi-Row Drag-and-Drop Issue for Chips in Item Submission Form
No tags
gidlmaster

src/app/shared/form/chips/chips.component.html

Modified
1 1 <div [className]="'float-left w-100 ' + wrapperClass">
2 - <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
2 + <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropListGroup>
3 3 <ng-template #tipContent>
4 4 <p class="text-left p-0 m-0" *ngFor="let tip of tipText">
5 5 {{tip}}
6 6 </p>
7 7 </ng-template>
8 - <div role="listitem" class="nav-item mr-2 mb-1"
8 + <div role="listitem" class="nav-item mr-2 mb-1 d-flex flex-row"
9 9 *ngFor="let c of chips.getChips(); let i = index"
10 10 #t="ngbTooltip"
11 11 triggers="manual"
12 + cdkDropList
13 + [cdkDropListData]="{ index: i }"
14 + cdkDropListOrientation="horizontal"
15 + (cdkDropListDropped)="onDrop($event)"
12 16 [ngbTooltip]="tipContent"
13 17 (mouseover)="showTooltip(t, i)"
14 18 (mouseout)="t.close()">
15 19 <a class="flex-sm-fill text-sm-center nav-link active bg-info"
16 20 cdkDrag
17 21 (cdkDragStarted)="onDrag(i)"
18 22 href="javascript:void(0);"
19 23 [ngClass]="{'chip-selected disabled': (editable && c.editMode) || dragged === i}"
20 24 (click)="chipsSelected($event, i);">
21 25 <span>

Everything looks good. We'll let you know here if there's anything you should know about.

Add shortcut