search

holoviz / panel

Panel: The powerful data exploration & web app framework for Python
https://panel.holoviz.org
BSD 3-Clause "New" or "Revised" License
4.74k stars 516 forks source link

Cannot edit Tabulator cells when an `on_click` event is registered #3625

Closed maximlt closed 2 months ago

maximlt commented 2 years ago

When an on_click event is registered on the Tabulator widget apparently the cells can no longer be edited.

import pandas as pd
import panel as pn

pn.extension('tabulator')

df = pd._testing.makeMixedDataFrame()

receiver = pn.pane.Str('Click Event Log:\n\n', width=400)
t = pn.widgets.Tabulator(df, widths=100)
i = 0

def callback(e):
    global i
    receiver.object += f'Click Event #{i} {e.value}\n'
    i += 1

t.on_click(callback)
pn.Row(t, receiver).servable()

issue_tabulator_clickevent

Getting errors in the log console on the second click:

12:01:50.018 Uncaught TypeError: cellEl.classList is undefined
    clearEditor http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:15095
    cancelEdit http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:15108
    edit http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:15218
    bindEditor http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:15147
    bindEditor http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:15145
    _configureCell http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:7719
    build http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:7625
    Cell http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:7611
    generateCell http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:3084
    generateCells http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:1145
    generateCells http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:1143
    generateCells http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:6759
    initialize http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:6782
    reinitialize http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:6863
    reinitialize http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:5594
    reinitialize http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:5592
    redraw http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:1301
    redraw http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:10880
    redraw http://localhost:5006/static/extensions/panel/panel.min.js?v=3bf01eea3cd511067b2288a5fa852836c355ef636bc02c7259fb21b4ca950cbe:52
    after_layout http://localhost:5006/static/extensions/panel/panel.min.js?v=3bf01eea3cd511067b2288a5fa852836c355ef636bc02c7259fb21b4ca950cbe:52
    after_layout http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
    compute_layout http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
    invalidate_layout http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
    rerender http://localhost:5006/static/extensions/panel/panel.min.js?v=3bf01eea3cd511067b2288a5fa852836c355ef636bc02c7259fb21b4ca950cbe:101
    connect_signals http://localhost:5006/static/js/bokeh-widgets.min.js?v=8a1ff6f5aa0d967f4998d275803bbb111d928fd9f605ef9e1f30cfd021df0e77224ee3d13f83edb3a942f6e4ccc569ee5dd8951a8aa6cb600602463b90c65a87:88
    s http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:207
    emit http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:180
    emit http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:180
    _setv http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:179
    setv http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:179
    apply_json_patch http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:165
    _handle_patch http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:590
    handle http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:590
    _steady_state_handler http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    _current_handler http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    _on_message http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    onmessage http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    connect http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    connect http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    pull_session http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    d http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:586
    add_document_from_session http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:586
    w http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:163
    embed_items http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:163
    embed_document http://localhost:5006/example_tabulator_click:43
    fn http://localhost:5006/example_tabulator_click:46
    fn http://localhost:5006/example_tabulator_click:62
    safely http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:595
    fn http://localhost:5006/example_tabulator_click:38
    EventListener.handleEvent* http://localhost:5006/example_tabulator_click:66
    <anonymous> http://localhost:5006/example_tabulator_click:67
tabulator.js:15095:4
    clearEditor http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:15095
    cancelEdit http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:15108
    edit http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:15218
    bindEditor http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:15147
    (Async: EventListener.handleEvent)
    bindEditor http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:15145
    _configureCell http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:7719
    build http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:7625
    Cell http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:7611
    generateCell http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:3084
    generateCells http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:1145
    forEach self-hosted:164
    generateCells http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:1143
    generateCells http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:6759
    initialize http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:6782
    reinitialize http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:6863
    reinitialize http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:5594
    forEach self-hosted:164
    reinitialize http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:5592
    redraw http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:1301
    redraw http://localhost:5006/static/extensions/panel/bundled/datatabulator/tabulator-tables@4.9.3/dist/js/tabulator.js:10880
    redraw http://localhost:5006/static/extensions/panel/panel.min.js?v=3bf01eea3cd511067b2288a5fa852836c355ef636bc02c7259fb21b4ca950cbe:52
    after_layout http://localhost:5006/static/extensions/panel/panel.min.js?v=3bf01eea3cd511067b2288a5fa852836c355ef636bc02c7259fb21b4ca950cbe:52
    after_layout http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
    compute_layout http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
    invalidate_layout http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:496
    rerender http://localhost:5006/static/extensions/panel/panel.min.js?v=3bf01eea3cd511067b2288a5fa852836c355ef636bc02c7259fb21b4ca950cbe:101
    connect_signals http://localhost:5006/static/js/bokeh-widgets.min.js?v=8a1ff6f5aa0d967f4998d275803bbb111d928fd9f605ef9e1f30cfd021df0e77224ee3d13f83edb3a942f6e4ccc569ee5dd8951a8aa6cb600602463b90c65a87:88
    s http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:207
    emit http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:180
    emit http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:180
    _setv http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:179
    setv http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:179
    apply_json_patch http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:165
    _handle_patch http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:590
    handle http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:590
    _steady_state_handler http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    _current_handler http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    _on_message http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    onmessage http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    (Async: EventHandlerNonNull)
    connect http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    connect http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    pull_session http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:587
    d http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:586
    add_document_from_session http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:586
    w http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:163
    embed_items http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:163
    AsyncFunctionNext self-hosted:632
    (Async: async)
    embed_document http://localhost:5006/example_tabulator_click:43
    fn http://localhost:5006/example_tabulator_click:46
    fn http://localhost:5006/example_tabulator_click:62
    safely http://localhost:5006/static/js/bokeh.min.js?v=3c61e952b808bb7e346ce828a565a5f23aaf7708d034fa9d0906403813355d45bb4e8d8b0b23a93f032c76831d4f0221846f28699c7f5147caa62e0d31668314:595
    fn http://localhost:5006/example_tabulator_click:38
    (Async: EventListener.handleEvent)
    <anonymous> http://localhost:5006/example_tabulator_click:66
    <anonymous> http://localhost:5006/example_tabulator_click:67
philippjfr commented 2 months ago

Seems to be fixed.