app.storage.tab is shared between the tabs generated with ui.navigate.to()

[MohAid]

Question

It was wonderful to add app.storage.tab, it solved and simplified a lot of issues for me, thanks.
But I faced one issue which I couldn't round around till now!

if a page (in a tab) generates new pages (in new tabs) using ui.navigate.to('/test_tab', new_tab=True) or ui.open('/test_tab', new_tab=True) then all the tabs (the generator and the generated tabs) are using the same tab-storage.
Whereas if I manually opened a new tab and directed it to 'http://localhost:8080/test_tab' it will take a separate tab-storage (as expected) but also it shares this storage with the generated tabs from it!

You can use this code to check the problem:

@ui.page('/test_tab')
async def main_page() -> None:
    await ui.context.client.connected()
    ui.button(text='open new tab', on_click=lambda: ui.navigate.to('/test_tab', new_tab=True))
    ui.button(text='Change x', on_click=lambda: change_x())
    ui.label().bind_text_from(app.storage.tab, 'x')

    def change_x():
        app.storage.tab['x'] = random.randint(1, 10)

or this generalized code also:

@ui.page('/test_tab1')
async def main_page() -> None:
    await ui.context.client.connected()
    ui.button(text='open new tab', on_click=lambda: ui.navigate.to('/test_tab2', new_tab=True))
    ui.button(text='Change x', on_click=lambda: change_x())
    ui.label().bind_text_from(app.storage.tab, 'x')

    def change_x():
        app.storage.tab['x'] = random.randint(1, 10)


@ui.page('/test_tab2')
async def main_page() -> None:
    await ui.context.client.connected()
    ui.button(text='open new tab', on_click=lambda: ui.navigate.to('/test_tab1', new_tab=True))
    ui.button(text='Change x', on_click=lambda: change_x())
    ui.label().bind_text_from(app.storage.tab, 'x')

    def change_x():
        app.storage.tab['x'] = random.randint(1, 10)

Is there something I missed?

[python-and-fiction]

They have the same tab_id.

ui.label(ui.context.client.tab_id)

[MohAid]

Exactly, and this is not the expected, am I right?
I am completing my work depending on the expected behavior, wishing it will be solved soon.

[MohAid]

and if it didn't, then I think I can use ui.link() instead of ui.navigate(), I'm n't sure but I think it solves the issue then.

[falkoschindler]

This seems to be a browser issue (or feature?).

Reproduction:

1. Go to https://www.google.com/
2. Open the JavaScript console and write something to the session storage:

   sessionStorage.setItem("test", 42)

3. Open another tab using window.open (like navigate.to does):

   window.open('#', '_blank')

4. Check the session storage in the new tab:

   sessionStorage.getItem("test")

I tested with Chrome and Firefox. In both cases "test" is "42" in the new tab.

[MohAid]

Thank you for the test, so it seems like it's a browser natural behavior.

[MohAid]

I tried to use ui.link(), it solved the issue.

        def open_link(target: Union[Callable[..., Any], str, Element] = '#', new_tab: bool = False):
            aa = ui.link(text='_____', target=target, new_tab=new_tab)
            # aa.set_visibility(False)
            aa.run_method('click')
            # aa.delete()
            return None

But:

• Do you have a better idea for what I am doing?
• The .run_method('click') has not been executed! how to click on it programmatically?

[python-and-fiction]

another js from internet,it works well.Is it expected?

ul = ui.link('new tab',target='/test_tab2',new_tab=True)
ui.timer(1,lambda :ui.run_javascript(f'document.getElementById("c{ul.id}").click();'),once=True)

[MohAid]

Unfortunately, I can't find a solution to your problem. 😕 Does anyone else have an idea?

@falkoschindler your attempt is more than enough, kind of you.

[MohAid]

@python-and-fiction
Actually, I thought of using "getElementById" but I'm not good enough at "javascript" so I didn't know how to handle it, then I neglected it.

Is it expected?

Yes of course, it is the needed thing, Thank you so much.
now I can use the following function instead of ui.navigate.to():

    _ = ui.link(text='', target=target, new_tab=new_tab).classes('p-0 m-0')
    _.set_visibility(False)
    ui.timer(0.01, lambda: ui.run_javascript(f'document.getElementById("c{_.id}").click();'), once=True)

[falkoschindler]

Interesting approach, @python-and-fiction!
I think we can simplify it like this:

def open(url: str) -> None:
    ul = ui.link('new tab', url, new_tab=True)
    ui.run_javascript(f'getElement({ul.id}).$el.click()')

ui.button('click', on_click=lambda: open('/subpage'))

getElement is a helper function from NiceGUI. But we need to dig into the HTML element $el. And as far as I can tell, we don't need to wait 1.0 or 0.01 seconds, because the link is created before calling the JavaScript code. For me it works without timer.

[python-and-fiction]

So elegant,wonderful method.