valor-software / ng2-dragula

Simple drag and drop with dragula
http://valor-software.com/ng2-dragula/
MIT License
1.91k stars 430 forks source link

sourceModel suddenly becomes undefined #970

Open exitlol opened 5 years ago

exitlol commented 5 years ago

REQUIRED: Before filing a bug report

Change each [ ] to [x] when you have done it.

Describe the bug (required) My dragula setup works, then in random occasions it throws an error: "sourceModel is undefined"and/or (in chrome case) "cannot read property '0' of undefined" Both errors point to a line @ng2-dragula line 257.

Steps to reproduce the behavior:

  1. Have a working setup with minimum 2 lists
  2. start dragging one item from a list to another
  3. randomly it'll stuck in your hand and you cannot drop the dragged item
  4. you'll end up in a dragging loop, you cannot drop your currently dragged item

If your issue appears in a larger codebase and it you can't pin down why it is happening, please

Template setup:

<div #autoscroll
     class="row wholeTable">
  <ng-container *ngFor="let stage of cardList; let i = index">
    <div class="col">
      <ng-container *ngIf="pipelineConfig.headerTemplate; else noHeaderForYou">
        <ng-container
                      *ngTemplateOutlet="pipelineConfig.headerTemplate; context : {$implicit: headerList[i], count: cardList[i].items.length}">
        </ng-container>
      </ng-container>
      <ng-template #noHeaderForYou>
        <!-- Displaying some useful info even if no custom template is present-->
        <dt-pipeline-header [label]="headerList[i].elementLabel"
                                   [count]="cardList[i].items.length">
        </dt-pipeline-header>
      </ng-template>
      <div class="row stage">
        <div *ngIf="stage.items"
             class="col"
             dragula="cardList"
             [(dragulaModel)]="stage.items"
             attr.id="{{stage.key}}">
          <ng-container *ngFor="let item of stage.items">
            <div class="card"
                 [ngClass]="{
              'dragabble' : pipelineConfig.permissionChecker(item),
              'nodrag': !pipelineConfig.permissionChecker(item)
            }">
              <div class="card-body">
                <ng-container *ngIf="!pipelineConfig.permissionChecker(item)">
                  <span class="disabled-indicator"><i class="fas fa-ban"></i></span>
                </ng-container>
                <ng-container
                              *ngTemplateOutlet="pipelineConfig.bodyTemplate; context: {$implicit: item, showColumns: showContent}">
                </ng-container>
              </div>
            </div>
          </ng-container>
        </div>
      </div>
    </div>
  </ng-container>
</div>

Versions (required)

Please state which versions of the following packages you have installed:

Browsers affected (optional)

Firefox and Chrome are both affected.

Additional context (optional)

Add any other context about the problem here.

mauriciogracia commented 2 years ago

3/14/2022 issue still happens on the first drag, with two lists connected between each other