table-dragger icon indicating copy to clipboard operation
table-dragger copied to clipboard

click event throws error in 2.0.2

Open alexgoff opened this issue 2 years ago • 0 comments

I updated table-dragger in an AngularJS application to v2.0.2 to address IE compatibility issues. After updating, click events are throwing an error that blocks future events. Dragging and dropping works, all events fired by table-dragger work as well.

Setup

component template

<table
    id="report-table"
    class="table report-table"
    ng-class="{ loading: $ctrl.isFetchingRows }"
>
    <thead>
        <tr id="report-columns">
            <th
                ng-repeat="header in $ctrl.headers.displayed track by $index"
                class="report-table-header"
            >
                <span ng-bind="header.viewFieldName"></span>
                <i class="fa fa-bars report-table-drag"></i>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr
            ng-repeat="row in $ctrl.rows.displayed track by $index"
            id="report-table-row{{ $index }}"
        >
            <td
                ng-repeat="cell in row track by $index"
                class="report-table-cell"
                ng-class="$ctrl.headers.displayed[$index].modelFieldName"
                ng-attr-data-value="{{ cell.toLowerCase() }}"
            >
                <span ng-bind-html="cell"></span>
            </td>
    </tbody>
</table>

component controller

registerTableDragger = () => {    
    const element = document.getElementById('report-table');
    this.dragger = tableDragger(element, {
        mode: 'column'
    });

    this.dragger.on('drop', (origin: number, dest: number) => {
        if (origin !== dest) {
            const newHeaders = [...this.headers.displayed];
            const [colToMove] = newHeaders.splice(origin, 1);
            newHeaders.splice(dest, 0, colToMove);
            this.headers.displayed = newHeaders;
            this.onColReorder({ headers: newHeaders });
        }
    });
 }

Clicking (but not dragging) one of the column headers produces this console error:

Uncaught rn {message: 'no elements in sequence', name: 'EmptyError'}
eval	@	table-dragger.js:1
setTimeout (async)		
a	@	table-dragger.js:1
n.error	@	table-dragger.js:1
n._error	@	table-dragger.js:1
n.error	@	table-dragger.js:1
n.notifyError	@	table-dragger.js:1
n._error	@	table-dragger.js:1
n.error	@	table-dragger.js:1
n._error	@	table-dragger.js:1
n.error	@	table-dragger.js:1
n._complete	@	table-dragger.js:1
n.complete	@	table-dragger.js:1
n._complete	@	table-dragger.js:1
n.complete	@	table-dragger.js:1
n._complete	@	table-dragger.js:1
n.complete	@	table-dragger.js:1
n._complete	@	table-dragger.js:1
n.complete	@	table-dragger.js:1
n._complete	@	table-dragger.js:1
n.complete	@	table-dragger.js:1
n.notifyNext	@	table-dragger.js:1
n._next	@	table-dragger.js:1
n.next	@	table-dragger.js:1
eval	@	table-dragger.js:1

As far as I can ascertain this error is being thrown by the firstDrag$ rxjs Observable

alexgoff avatar Oct 14 '21 18:10 alexgoff