ui.log behavior with ui.tabs

[pandabearcodes]

Hi!

I added to a discussion a while ago - #3909
Which resulted in issue #5112

As the issue was closed, i went right ahead to try it, and as expected, it works like a charm. Thank you very much! 💖

However, I do have a follow up to this. When i have a setup in which a ui.log is placed within a ui.tabs structure, this stickiness is lost after switching between tabs:

from nicegui import ui
import time

with ui.left_drawer().props('width=200').classes('bg-secondary'):
        with ui.tabs().props('vertical').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):
        log = ui.log().classes('w-full h-30vh')
    with ui.tab_panel(two):
        ui.label('nicegui is my favorite.').classes('text-2xl')

def write_log():
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')

ui.timer(0.5, write_log, active=True)

ui.run()

In the above example, ui.log starts off sticking to the bottom, i switch to 'Two' - back to 'One', and we are set at the top.

With some help from Copilot I was able to work around this by adding a manual override like this:

from nicegui import ui
import time

def scroll_log_to_bottom():
    ui.run_javascript(f'''
        setTimeout(function() {{
            var log = document.querySelector("#log");
            if (log) log.scrollTop = log.scrollHeight;
        }}, 100);
    ''')

def on_tab_change(e):
    if e.value == "One":
        scroll_log_to_bottom()

with ui.left_drawer().props('width=200').classes('bg-secondary') as left_drawer:
        with ui.tabs().props('vertical').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):
        log = ui.log().classes('w-full h-30vh').props('id=log')
    with ui.tab_panel(two):
        ui.label('Nicegui is my favorite.').classes('text-2xl')

def write_log():
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')
    log.push(f'Log entry at {time.strftime("%H:%M:%S")}')

ui.timer(0.5, write_log, active=True)
tabs.on_value_change(lambda e:on_tab_change(e))

ui.run()

This would need to be expanded upon to save the last position and/or if it was scrolled to the bottom, but it works in general.

Now I was just wondering if the current behavior is expected, and/or if this is something that would deserve a nicegui way of handling it.

Love,
panda