[BUG] - Navigation in cell after editing make table content dissapears, only Firefox

[pertile]

Describe the bug

If I edit a cell, and then try to move to another cell (Tab, Shift+Tab, up arrow...) I get following error on console: TypeError: cellEl.classList is undefined. Then table content dissapears but headers are still there.

I tried to reproduce making a Vue component that doesn't depend on Vue-Tabulator and it works fine.

As what I could see the error arises because the method Edit.prototype.clearEditor, that method is invoked twice after I send a Tab key, on the second time it gets an empty element (div tag associated to the cell) so it fails when it tries to remove a class from the empty element.

If after table dissapears you filter a column content shows up again. If you press Enter instead of Tab everything works fine. If you press Tab without changing content it also works fine.

Tried on Chrome and this bug is not present.

Tabulator Info

• Version: 4.6

VueTabulator Info

• Which version of VueTabulator are you using? 1.2.2

Working Example
JS Fiddle

To Reproduce
Steps to reproduce the behavior:

1. Click on Jamie (row 2, second column)
2. Make a change (for example press "a")
3. Press Tab (or Shift-Tab or up arrow)
4. See error

Expected behavior
Next cell gain focus for editing

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
** if possible, run the following comand: npx envinfo --showNotFound --duplicate --fullTree **
System:
OS: Windows 10 10.0.18362
CPU: (4) x64 Intel(R) Core(TM) i3-6006U CPU @ 2.00GHz
Memory: 887.55 MB / 7.30 GB
Binaries:
Node: 12.5.0 - C:\laragon\bin\nodejs\node-v12\node.EXE
Yarn: Not Found
npm: 6.9.0 - C:\laragon\bin\nodejs\node-v12\npm.CMD
Watchman: Not Found
Managers:
Cargo: Not Found
Composer: 1.8.6 - C:\laragon\bin\composer\composer.BAT
Gradle: Not Found
Maven: Not Found
pip2: Not Found
pip3: 20.1
RubyGems: Not Found
Utilities:
CMake: Not Found
Git: 2.19.2. - /cmd/git
Clang: Not Found
FFmpeg: Not Found
Virtualization:
Docker: Not Found
Parallels: Not Found
VirtualBox: Not Found
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Sublime Text: Not Found
VSCode: 1.44.2 - C:\Users\fpertile\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
Languages:
Bash: Not Found
Go: Not Found
Elixir: Not Found
Erlang: Not Found
Java: Not Found
Perl: Not Found
PHP: 7.2.19 - C:\laragon\bin\php\php-7.2.19-Win32-VC15-x64\php.EXE
Python: 3.8.2
Python3: 3.8.2
R: Not Found
Ruby: Not Found
Rust: Not Found
Databases:
MongoDB: Not Found
MySQL: 5.7.24 - C:\laragon\bin\mysql\mysql-5.7.24-winx64\bin\mysql.EXE
PostgreSQL: Not Found
SQLite: 3.19.1 - C:\laragon\bin\laragon\utils\sqlite3.EXE
Browsers:
Edge: 44.18362.449.0
Internet Explorer: 11.0.18362.1
Monorepos:
Yarn Workspaces: Not Found
Lerna: Not Found

• OS: Windows 10
• Browser Firefox 75.0 64-bit

[pertile]

In Chrome it's not completely functional, it should make next cell editable but you just lose focus. I tried again with a Vue component without Vue-Tabulator in Chrome and Mozilla and you don't lose focus.

Sorry I don't know how to make this work in JS Fiddle:

<template>
    <div ref="table"></div>
</template>

<script>
var Tabulator = require("tabulator-tables");

import "tabulator-tables/dist/css/tabulator.min.css";


export default {
    data: function() {
        return {
            tabulator: null,
            tableData: [                
                {
                    id: 1,
                    name: 'hi',
                    test: 'dude',
                    from: new Date
                },
                {
                    id: 2,
                    name: 'what is wrong?',
                    chot: 'whatever',
                    from: new Date
                },
            ],
            options: {
                index: "id",
                locale: true,
                responsieLayout:"collapse",
                //ajaxProgressiveLoad:"load",
                tooltips: true,
                responsiveLayoutCollapseStartOpen:false,
                columns: [
                    {title:"ID", field:"id", headerFilter:true},
                    {title:"Name", field: 'name', editor: 'input', headerFilter:true},
                    {title:"Test", field: 'test', editor: 'input', headerFilter:true},
                    {title:"Since", field: 'from', editor: 'input', formatter:"datetime", formatterParams:{
                            inputFormat:"YYYY-MM-DD",
                            outputFormat:"DD/MM/YYYY",
                            invalidPlaceholder:"",
                        },
                    },
                ]    
            },
            isBusy: false
        }
    },
    mounted() {
        let table = this;

        this.tabulator = new Tabulator(this.$refs.table, this.options);
        this.tabulator.setData(this.tableData);
    }
}
</script>

[niio972]

In Chrome it's not completely functional, it should make next cell editable but you just lose focus. I tried again with a Vue component without Vue-Tabulator in Chrome and Mozilla and you don't lose focus.

Sorry I don't know how to make this work in JS Fiddle:

<template>
    <div ref="table"></div>
</template>

<script>
var Tabulator = require("tabulator-tables");

import "tabulator-tables/dist/css/tabulator.min.css";


export default {
    data: function() {
        return {
            tabulator: null,
            tableData: [                
                {
                    id: 1,
                    name: 'hi',
                    test: 'dude',
                    from: new Date
                },
                {
                    id: 2,
                    name: 'what is wrong?',
                    chot: 'whatever',
                    from: new Date
                },
            ],
            options: {
                index: "id",
                locale: true,
                responsieLayout:"collapse",
                //ajaxProgressiveLoad:"load",
                tooltips: true,
                responsiveLayoutCollapseStartOpen:false,
                columns: [
                    {title:"ID", field:"id", headerFilter:true},
                    {title:"Name", field: 'name', editor: 'input', headerFilter:true},
                    {title:"Test", field: 'test', editor: 'input', headerFilter:true},
                    {title:"Since", field: 'from', editor: 'input', formatter:"datetime", formatterParams:{
                            inputFormat:"YYYY-MM-DD",
                            outputFormat:"DD/MM/YYYY",
                            invalidPlaceholder:"",
                        },
                    },
                ]    
            },
            isBusy: false
        }
    },
    mounted() {
        let table = this;

        this.tabulator = new Tabulator(this.$refs.table, this.options);
        this.tabulator.setData(this.tableData);
    }
}
</script>

Hi,
I had a part of this example in JSFiddle : https://jsfiddle.net/qfg1c8kt/
I have found the same issue using Firefox.
I can't reproduce it with the native library. Do you have any idea what is causing this behaviour ?
Console log issue in Firefox :

Uncaught (in promise) TypeError: t.classList is undefined
    clearEditor https://unpkg.com/[email protected]/dist/js/tabulator.min.js:7
    cancelEdit https://unpkg.com/[email protected]/dist/js/tabulator.min.js:7
    refreshActiveData https://unpkg.com/[email protected]/dist/js/tabulator.min.js:3
    _setDataActual https://unpkg.com/[email protected]/dist/js/tabulator.min.js:3
    setData https://unpkg.com/[email protected]/dist/js/tabulator.min.js:3
    setData https://unpkg.com/[email protected]/dist/js/tabulator.min.js:3
    _setData https://unpkg.com/[email protected]/dist/js/tabulator.min.js:4
    setData https://unpkg.com/[email protected]/dist/js/tabulator.min.js:4
    value https://unpkg.com/vue-tabulator@latest:27
    run https://unpkg.com/vue@latest:4567
    flushSchedulerQueue https://unpkg.com/vue@latest:4311
    nextTick https://unpkg.com/vue@latest:1989
    flushCallbacks https://unpkg.com/vue@latest:1915

Tested on : Firefox 81.0
Thanks

[angeliski]

Hey @niio972 and @pertile Thanks for the report. I will try to find the problem.
A better approach for that would be to use updateStrategy how UPDATE when using editable tables:
https://jsfiddle.net/wx8dj97r/