json_editor in Tabbed Interface Problems

[natankeddem]

First Check

• I added a very descriptive title here.
• This is not a Q&A. I am sure something is wrong with NiceGUI or its documentation.
• I used the GitHub search to find a similar issue and came up empty.

Example Code

from nicegui import ui

with ui.tabs().classes("w-full") as tabs:
    one = ui.tab("One")
    two = ui.tab("Two")
with ui.tab_panels(tabs, value=one).classes("w-full"):
    with ui.tab_panel(one):
        e_one = ui.json_editor({"content": {"json": {"price": 15.0}}})
    with ui.tab_panel(two):
        e_two = ui.json_editor({"content": {"json": {"price": 15.0}}})


def change_tab_two():
    e_two.properties["content"]["json"]["price"] = e_two.properties["content"]["json"]["price"] + 1


ui.button("Change Data in Tab Two", on_click=change_tab_two)

ui.run()

Description

I am refactoring code from v2 to v3 and found some strange behaviour when using multiple json_editor elements inside separate tabbed interfaces. Firstly if you attempt to manipulate data in an editor that hasn't been rendered yet (tab hasn't been selected and element viewed) you get a console warning. This doesn't happen on v2. This can be simulated by pressing the "Change Data in Tab Two" button immediately on page load in the example. Also, when switching between tabs the UI seems to lock up until page refresh:

ngtab0.webm

NiceGUI Version

3.1.0

Python Version

Python 3.13.1

Browser

Chrome

Operating System

Windows

Additional Context

It seems like some of this could be browser specific. For example the tab switching issue I can't get to happen in Firefox but happens readily in Chrome.

[natankeddem]

I was doing a bit more troubleshooting on the tab switching issue today and have some more information. It seems like it only happens if you refresh the page with the chrome dev tools up.

[falkoschindler]

Thanks for reporting this issue, @natankeddem. I can reproduce both problems with this minimum example:

with ui.tabs() as tabs:
    one = ui.tab('One')
    two = ui.tab('Two')

with ui.tab_panels(tabs, value=one):
    with ui.tab_panel(one):
        ui.button('Update', on_click=lambda: editor.properties['content']['json'].update(x=1))
    with ui.tab_panel(two):
        editor = ui.json_editor({'content': {'json': {'x': 0}}})

1. Clicking "Update" without switching to tab "Two" causes a JavaScript error "TypeError: Cannot read properties of undefined (reading 'update_editor')".
2. Switching between both tabs causes some kind of lockup, but only in the presence of the developer console.

[falkoschindler]

The JavaScript error seems to occur for all UI elements with an _update_method, like ui.aggrid:

with ui.tabs() as tabs:
    one = ui.tab('One')
    two = ui.tab('Two')
with ui.tab_panels(tabs, value=one):
    with ui.tab_panel(one):
        ui.button('Update', on_click=lambda: grid.options['rowData'].append({'name': 'Peter'}))
    with ui.tab_panel(two):
        grid = ui.aggrid({'columnDefs': [{'field': 'name'}], 'rowData': []}).classes('w-100')

[evnchn]

Oh so that's the source of the error I got when debugging and implementing #5615...

Fair.

[evnchn]

doesn't happen on v2

That is because in v2 change_tab_two doesn't invoke .update() for e_two so update_method was never ran.

This also errors out in v2:

    with ui.tabs() as tabs:
        one = ui.tab('One')
        two = ui.tab('Two')

    with ui.tab_panels(tabs, value=one):
        with ui.tab_panel(one):
            ui.button('Update', on_click=lambda: editor.update()) # NOTE .update() here
        with ui.tab_panel(two):
            editor = ui.json_editor({'content': {'json': {'x': 0}}})

Core of the issue, update_method should never run for not-yet-mounted elements. And since elements are responsible of "mounting themselves perfectly" without invocations to update_method in the first place, we also do not need to invoke update_method on after mount either. The fix will be trivial.