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

click event throws error in 2.0.2 #47

Open
alexgoff opened this issue Oct 14, 2021 · 0 comments
Open

click event throws error in 2.0.2 #47

alexgoff opened this issue Oct 14, 2021 · 0 comments

Comments

@alexgoff
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant