Surprising results using routers

[gabrielfougeron]

Hi,

This is a repost of a another issue available here: https://github.com/Kitware/trame-router/issues/4 since I'm not sure what the best repo for it is.

Describe the bug Some HtmlElements don't show up when defined in with statements, and I don't understand why. I suspect this has something to do with trame-router, but I'm not sure.

To Reproduce Run the following code.

Code

from trame.app import get_server
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.ui.router import RouterViewLayout
from trame.widgets import vuetify, router
import trame.widgets.html as html

server = get_server()
server.client_type = "vue2"
state, ctrl = server.state, server.controller

def create_table():
    row = vuetify.VRow(style="height: 100%")
    with row:
        with vuetify.VCol() as col:            
            row.col = col
    return row

# Home route
home = RouterViewLayout(server, "/")
with home:
    
    with vuetify.VCard():
        vuetify.VCardTitle("This is home")
        
    home.table = create_table()

# Foo route
with RouterViewLayout(server, "/foo") as foo:
    with vuetify.VCard():
        vuetify.VCardTitle("This is foo")
        with vuetify.VCardText():
            vuetify.VBtn("Take me back", click="$router.back()")

# Bar/id
with RouterViewLayout(server, "/bar/:id"):
    with vuetify.VCard():
        vuetify.VCardTitle("This is bar with ID '{{ $route.params.id }}'")

# Main page content
with SinglePageWithDrawerLayout(server) as layout:
    layout.title.set_text("Multi-Page demo")

    with layout.content:
        with vuetify.VContainer():
            router.RouterView()
            table = create_table()

    # add router buttons to the drawer
    with layout.drawer:
        with vuetify.VList(shaped=True, v_model=("selectedRoute", 0)):
            vuetify.VSubheader("Routes")

            with vuetify.VListItem(to="/"):
                with vuetify.VListItemIcon():
                    vuetify.VIcon("mdi-home")
                with vuetify.VListItemContent():
                    vuetify.VListItemTitle("Home")

            with vuetify.VListItem(to="/foo"):
                with vuetify.VListItemIcon():
                    vuetify.VIcon("mdi-food")
                with vuetify.VListItemContent():
                    vuetify.VListItemTitle("Foo")

            with vuetify.VListGroup(value=("true",), sub_group=True):
                with vuetify.Template(v_slot_activator=True):
                    vuetify.VListItemTitle("Bars")
                with vuetify.VListItemContent():
                    with vuetify.VListItem(v_for="id in [1,2,3]", to=("'/bar/' + id",)):
                        with vuetify.VListItemIcon():
                            vuetify.VIcon("mdi-peanut-outline")
                        with vuetify.VListItemContent():
                            vuetify.VListItemTitle("Bar")
                            vuetify.VListItemSubtitle("ID '{{id}}'")
                            
    with table.col:
        html.Div("This message shows on bottom")
        
    with home:
        html.Div("This message shows on top")
        
    with home.table.col:
        html.Div("This message does not show anywhere")
        
if __name__ == "__main__":
    server.start()

Expected behavior

A three Divs should (as far as I understand) appear in the UI, but only two of them do

Screenshots

Platform:

Device:

• [ x] Desktop
• [ ] Mobile

OS:

• [ ] Windows
• [ ] MacOS
• [ ] Linux
• [ ] Android
• [ ] iOS
• [x] WSL Ubuntu

Browsers Affected:

• [x] Chrome