Page Controls Fail After Route Page Change.

[M0hawke]

Description

I have an appbar that is utilizing the routing feature to load pages using page.go. When entering the app all pages are working. When going back to a page already visited the buttons and other events fail to function in the page any longer. I added logging and everything appears to be firing just fine in the log. It might be something to do with loading the pages as Python modules? Module reloads didn't help.

Code example to reproduce the issue:

controls/AppBar.py

import flet as ft

def NavBar(page):
    
    NavBar = ft.AppBar(
        leading=ft.Image(src="icons/Icing_Icon_42_alt.png", expand=False, width=42),
        leading_width=60,
        title=ft.Text("Testing"),
        center_title=False,
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.HOME, on_click=lambda _: page.go('/Home') ),
            ft.IconButton(ft.icons.MENU_BOOK, on_click=lambda _: page.go('/Journal') ),
            ft.IconButton(ft.icons.ADD_BUSINESS, on_click=lambda _: print('I break them too') )
        ]
    )
    
    page.update()
    return NavBar

views/flet_router.py

import flet as ft

# views
from views.home_view import HomeView
from views.journal_view import JournalView

class Router:

    def __init__(self, page, app_path=None):
        self.app_path = app_path
        self.page = page
        self.routes = {
            "/Home": HomeView(page),
            "/Journal": JournalView(page),
        }
        self.body = ft.Container(content=self.routes['/Home'], expand=True)

    def route_change(self, route):
        self.body.content = self.routes[route.route]
        self.body.update()

main.py

#!/usr/bin/env python3
import flet as ft

import logging
logging.basicConfig(level=logging.DEBUG)

from views.flet_router import Router
from controls.app_bar import NavBar

def main(page: ft.Page):
  
    page.appbar = NavBar(page)
    
    myRouter = Router(page)

    page.on_route_change = myRouter.route_change
    #page.fetch_page_details()
    page.add(myRouter.body)
    page.go('/Home')

ft.app(target=main)

views/home_view.py

import flet as ft

def HomeView(page):

    def toggle_theme(e):
        page.theme_mode = "light" if page.theme_mode =="dark" else "dark"
        toggletheme.selected = not toggletheme.selected
        page.update()
    
    toggletheme = ft.IconButton(
        on_click=toggle_theme,
        icon="light_mode",
        selected_icon="dark_mode",
        style=ft.ButtonStyle(
            color={"":ft.colors.WHITE,"selected":ft.colors.BLACK}
        )
    )

    testtext = ft.Text()
    
    def testone(e):
        testtext.value = 'button one'
        
    def testtwo(e):
        testtext.value = 'button two'

    page_content = ft.Column(
               
            [
                ft.Row(
                [
                    ft.Text(
                        "Route Bug Testing",
                        size=50),
                    toggletheme,
                    ft.ElevatedButton("test_button", icon=ft.icons.COLORIZE, on_click=testone),
                    ft.ElevatedButton("test_button", icon=ft.icons.COLORIZE, on_click=testtwo),
                    testtext
                ], 
                alignment=ft.MainAxisAlignment.CENTER
            )
            ]
    
    )
    
    page.update()
    return page_content

views/journal_view.py

import flet as ft

def JournalView(page):

    def test(e):
        print('test')

    page_content = ft.Column(
               
            [
                ft.Row(
                [
                    ft.Text(
                        "Route Bug Testing",
                        size=50),
                    ft.ElevatedButton("test", on_click=test)
                    
                ], 
                alignment=ft.MainAxisAlignment.CENTER
            )
            ]
    
    )
    
    page.update()
    return page_content

Describe the results you received:

Everything works as expected when starting the app and moving between the pages but they fail to work when visiting them again.

Describe the results you expected:

Additional information you deem important (e.g. issue happens only occasionally):
Log Output

INFO:flet:Starting up UDS server on /tmp/MCKdyCQqqK
DEBUG:flet:Waiting for a client connection
INFO:flet:App URL: /tmp/MCKdyCQqqK
INFO:flet:Connected to Flet app and handling user sessions...
INFO:flet:Starting Flet View app...
INFO:flet:Flet View found in: /home/mohawke/.flet/bin/flet-0.5.1
DEBUG:flet:Connection from 
DEBUG:flet:Message size: 274
DEBUG:flet:_on_message: {"action":"registerWebClient","payload":{"pageName":"tmp/MCKdyCQqqK","pageRoute":"/","pageWidth":"0.0","pageHeight":"0.0","windowWidth":"1280.0","windowHeight":"720.0","windowTop":"32.0","windowLeft":"26.0","isPWA":"false","isWeb":"false","platform":"linux","sessionId":""}}
DEBUG:flet:__send: {"action":"registerWebClient","payload":{"session":{"id":"","controls":{"page":{"i":"page","t":"page","p":"","c":[],"route":"/","width":"0.0","height":"0.0","windowwidth":"1280.0","windowheight":"720.0","windowtop":"32.0","windowleft":"26.0","pwa":"false","web":"false","platform":"linux"}}},"error":"","appInactive":false}}
DEBUG:flet:Sent: 328
DEBUG:flet_core:_process_command: get ['page', 'route'] {}
DEBUG:flet_core:_process_command: get ['page', 'pwa'] {}
DEBUG:flet_core:_process_command: get ['page', 'web'] {}
DEBUG:flet_core:_process_command: get ['page', 'platform'] {}
DEBUG:flet_core:_process_command: get ['page', 'width'] {}
DEBUG:flet_core:_process_command: get ['page', 'height'] {}
DEBUG:flet_core:_process_command: get ['page', 'windowWidth'] {}
DEBUG:flet_core:_process_command: get ['page', 'windowHeight'] {}
DEBUG:flet_core:_process_command: get ['page', 'windowTop'] {}
DEBUG:flet_core:_process_command: get ['page', 'windowLeft'] {}
INFO:flet:Session started: 
DEBUG:flet_core:_process_command: set ['page'] {'windowcenter': '1681232000.6672182'}
DEBUG:flet_core:_process_command: add [] {'to': 'page', 'at': '0'}
DEBUG:flet_core:_process_command: add [] {'to': 'page', 'at': '1'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"page","windowcenter":"1681232000.6672182"}]}},{"action":"addPageControls","payload":{"controls":[{"t":"view","i":"_1","p":"page","c":[],"at":"0"}],"trimIDs":[]}},{"action":"addPageControls","payload":{"controls":[{"t":"offstage","i":"_2","p":"page","c":["_3"],"at":"1"},{"t":"clipboard","i":"_3","p":"_2","c":[]}],"trimIDs":[]}}]}
DEBUG:flet:Sent: 432
DEBUG:flet_core:_process_command: set ['page'] {'darktheme': '{"color_scheme_seed":"pink","use_material3":true,"visual_density":"standard","page_transitions":{}}', 'fonts': '{"High Sylvester":"fonts/HighSylvester-Yz3Bj.ttf"}', 'theme': '{"color_scheme_seed":"pink","use_material3":true,"visual_density":"standard","page_transitions":{}}', 'thememode': 'dark'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"page","darktheme":"{\"color_scheme_seed\":\"pink\",\"use_material3\":true,\"visual_density\":\"standard\",\"page_transitions\":{}}","fonts":"{\"High Sylvester\":\"fonts/HighSylvester-Yz3Bj.ttf\"}","theme":"{\"color_scheme_seed\":\"pink\",\"use_material3\":true,\"visual_density\":\"standard\",\"page_transitions\":{}}","thememode":"dark"}]}}]}
DEBUG:flet:Sent: 445
DEBUG:flet_core:_process_command: add [] {'to': '_1', 'at': '0'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"addPageControls","payload":{"controls":[{"t":"appbar","i":"_4","p":"_1","c":["_5","_6","_7","_8","_9","_10","_11","_12"],"at":"0","bgcolor":"surfacevariant","centertitle":"false","leadingwidth":"60"},{"t":"image","i":"_5","p":"_4","c":[],"n":"leading","src":"icons/Icing_Icon_42_alt.png","width":"42"},{"t":"text","i":"_6","p":"_4","c":[],"color":"pink300","fontfamily":"High Sylvester","n":"title","size":"36","value":"Icing"},{"t":"iconbutton","i":"_7","p":"_4","c":[],"icon":"home","n":"action","tooltip":"Home"},{"t":"iconbutton","i":"_8","p":"_4","c":[],"icon":"menu_book","n":"action","tooltip":"Journal"},{"t":"iconbutton","i":"_9","p":"_4","c":[],"icon":"add_business","n":"action","tooltip":"Add glaze"},{"t":"iconbutton","i":"_10","p":"_4","c":[],"icon":"palette","n":"action","tooltip":"Mix Glazes"},{"t":"iconbutton","i":"_11","p":"_4","c":[],"icon":"view_carousel","n":"action","tooltip":"View Mixes"},{"t":"iconbutton","i":"_12","p":"_4","c":[],"icon":"question_answer","n":"action","tooltip":"Information"}],"trimIDs":[]}}]}
DEBUG:flet:Sent: 1095
DEBUG:flet_core:_process_command: set ['_1'] {'padding': '8'}
DEBUG:flet_core:_process_command: add [] {'to': '_2', 'at': '0'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_1","padding":"8"}]}},{"action":"addPageControls","payload":{"controls":[{"t":"filepicker","i":"_13","p":"_2","c":[],"at":"0","upload":"[]"}],"trimIDs":[]}}]}
DEBUG:flet:Sent: 260
DEBUG:flet_core:_process_command: add [] {'to': '_2', 'at': '1'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"addPageControls","payload":{"controls":[{"t":"filepicker","i":"_14","p":"_2","c":[],"at":"1","upload":"[]"}],"trimIDs":[]}}]}
DEBUG:flet:Sent: 181
DEBUG:flet_core:_process_command: add [] {'to': '_1', 'at': '1'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"addPageControls","payload":{"controls":[{"t":"container","i":"_15","p":"_1","c":["_16"],"at":"1","expand":"1"},{"t":"column","i":"_16","p":"_15","c":["_17"],"n":"content"},{"t":"row","i":"_17","p":"_16","c":["_18","_19","_20","_21","_22"],"alignment":"center"},{"t":"text","i":"_18","p":"_17","c":[],"size":"50","value":"Route Bug Testing"},{"t":"iconbutton","i":"_19","p":"_17","c":[],"icon":"light_mode","selectedicon":"dark_mode","style":"{\"color\":{\"\":\"white\",\"selected\":\"black\"}}"},{"t":"elevatedbutton","i":"_20","p":"_17","c":[],"icon":"colorize","text":"test_button"},{"t":"elevatedbutton","i":"_21","p":"_17","c":[],"icon":"colorize","text":"test_button"},{"t":"text","i":"_22","p":"_17","c":[]}],"trimIDs":[]}}]}
DEBUG:flet:Sent: 787
DEBUG:flet_core:_process_command: set ['page'] {'route': '/Home'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"page","route":"/Home"}]}}]}
DEBUG:flet:Sent: 129
DEBUG:flet:Message size: 82
DEBUG:flet:_on_message: {"action":"updateControlProps","payload":{"props":[{"i":"page","route":"/Home"}]}}
INFO:flet_core:page.on_event: page change [{"i":"page","route":"/Home"}]
DEBUG:flet:Message size: 109
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"page","eventName":"route_change","eventData":"/Home"}}
INFO:flet_core:page.on_event: page route_change /Home
DEBUG:flet:Message size: 96
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_19","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _19 click 
DEBUG:flet_core:_process_command: set ['page'] {'thememode': 'light'}
DEBUG:flet_core:_process_command: set ['_19'] {'selected': 'true'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"page","thememode":"light"}]}},{"action":"updateControlProps","payload":{"props":[{"i":"_19","selected":"true"}]}}]}
DEBUG:flet:Sent: 217
DEBUG:flet:Message size: 96
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_19","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _19 click 
DEBUG:flet_core:_process_command: set ['page'] {'thememode': 'dark'}
DEBUG:flet_core:_process_command: set ['_19'] {'selected': 'false'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"page","thememode":"dark"}]}},{"action":"updateControlProps","payload":{"props":[{"i":"_19","selected":"false"}]}}]}
DEBUG:flet:Sent: 217
DEBUG:flet:Message size: 96
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_20","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _20 click 
DEBUG:flet_core:_process_command: set ['_22'] {'value': 'button one'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_22","value":"button one"}]}}]}
DEBUG:flet:Sent: 133
DEBUG:flet:Message size: 96
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_21","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _21 click 
DEBUG:flet_core:_process_command: set ['_22'] {'value': 'button two'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_22","value":"button two"}]}}]}
DEBUG:flet:Sent: 133
DEBUG:flet:Message size: 95
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_8","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _8 click 
DEBUG:flet_core:_process_command: remove ['_16'] {}
DEBUG:flet_core:_process_command: add [] {'to': '_15', 'at': '0'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"removeControl","payload":{"ids":["_16"]}},{"action":"addPageControls","payload":{"controls":[{"t":"column","i":"_23","p":"_15","c":["_24","_34"],"at":"0","expand":"1","n":"content"},{"t":"row","i":"_24","p":"_23","c":["_25","_30","_31"],"alignment":"start","expand":"1","verticalalignment":"start"},{"t":"column","i":"_25","p":"_24","c":["_26","_28","_29"],"alignment":"start","expand":"1","spacing":"0"},{"t":"container","i":"_26","p":"_25","c":["_27"],"alignment":"{\"x\":-1,\"y\":-1}"},{"t":"textfield","i":"_27","p":"_26","c":[],"autofocus":"true","border":"underline","filled":"true","label":"MarkDown editor","multiline":"true","n":"content","onchange":"true","value":"## Entry Title"},{"t":"textfield","i":"_28","p":"_25","c":[],"border":"underline","countertext":"Tag Count: 0","filled":"true","height":"80","label":"Add hashtags"},{"t":"row","i":"_29","p":"_25","c":[],"autoscroll":"true","spacing":"6"},{"t":"verticaldivider","i":"_30","p":"_24","c":[],"color":"pink400","thickness":"1","width":"0"},{"t":"column","i":"_31","p":"_24","c":["_32"],"alignment":"start","expand":"1","scroll":"auto"},{"t":"container","i":"_32","p":"_31","c":["_33"],"padding":"0"},{"t":"markdown","i":"_33","p":"_32","c":[],"codestyle":"{\"font_family\":\"Roboto Mono\"}","codetheme":"tomorrow-night-eighties","extensionset":"gitHubFlavored","n":"content","selectable":"false","value":"## Entry Title"},{"t":"row","i":"_34","p":"_23","c":["_35","_38"],"alignment":"spaceBetween"},{"t":"container","i":"_35","p":"_34","c":["_36"]},{"t":"row","i":"_36","p":"_35","c":["_37"],"alignment":"start","expand":"1","n":"content"},{"t":"elevatedbutton","i":"_37","p":"_36","c":[],"icon":"upload_file","text":"Add Images"},{"t":"container","i":"_38","p":"_34","c":["_39"],"padding":"6"},{"t":"elevatedbutton","i":"_39","p":"_38","c":[],"icon":"save_alt_rounded","n":"content","text":"Save"}],"trimIDs":[]}}]}
DEBUG:flet:Sent: 1942
DEBUG:flet_core:_process_command: set ['page'] {'route': '/Journal'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"page","route":"/Journal"}]}}]}
DEBUG:flet:Sent: 132
DEBUG:flet:Message size: 85
DEBUG:flet:_on_message: {"action":"updateControlProps","payload":{"props":[{"i":"page","route":"/Journal"}]}}
INFO:flet_core:page.on_event: page change [{"i":"page","route":"/Journal"}]
DEBUG:flet:Message size: 112
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"page","eventName":"route_change","eventData":"/Journal"}}
INFO:flet_core:page.on_event: page route_change /Journal
DEBUG:flet:Message size: 96
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"focus","eventData":""}}
INFO:flet_core:page.on_event: _27 focus 
DEBUG:flet:Message size: 95
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"blur","eventData":""}}
INFO:flet_core:page.on_event: _27 blur 
DEBUG:flet:Message size: 95
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_7","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _7 click 
DEBUG:flet_core:_process_command: remove ['_23'] {}
DEBUG:flet_core:_process_command: add [] {'to': '_15', 'at': '0'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"removeControl","payload":{"ids":["_23"]}},{"action":"addPageControls","payload":{"controls":[{"t":"column","i":"_16","p":"_15","c":["_17"],"at":"0","n":"content"},{"t":"row","i":"_17","p":"_16","c":["_18","_19","_20","_21","_22"],"alignment":"center"},{"t":"text","i":"_18","p":"_17","c":[],"size":"50","value":"Route Bug Testing"},{"t":"iconbutton","i":"_19","p":"_17","c":[],"icon":"light_mode","selected":"false","selectedicon":"dark_mode","style":"{\"color\":{\"\":\"white\",\"selected\":\"black\"}}"},{"t":"elevatedbutton","i":"_20","p":"_17","c":[],"icon":"colorize","text":"test_button"},{"t":"elevatedbutton","i":"_21","p":"_17","c":[],"icon":"colorize","text":"test_button"},{"t":"text","i":"_22","p":"_17","c":[],"value":"button two"}],"trimIDs":[]}}]}
DEBUG:flet:Sent: 818
DEBUG:flet_core:_process_command: set ['page'] {'route': '/Home'}
DEBUG:flet:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"page","route":"/Home"}]}}]}
DEBUG:flet:Sent: 129
DEBUG:flet:Message size: 82
DEBUG:flet:_on_message: {"action":"updateControlProps","payload":{"props":[{"i":"page","route":"/Home"}]}}
INFO:flet_core:page.on_event: page change [{"i":"page","route":"/Home"}]
DEBUG:flet:Message size: 109
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"page","eventName":"route_change","eventData":"/Home"}}
INFO:flet_core:page.on_event: page route_change /Home
DEBUG:flet:Message size: 96
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_19","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _19 click 
DEBUG:flet:Message size: 96
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_19","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _19 click 
DEBUG:flet:Message size: 96
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_20","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _20 click 
DEBUG:flet:Message size: 96
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_20","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _20 click 
DEBUG:flet:Message size: 96
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_21","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _21 click 
DEBUG:flet:Message size: 96
DEBUG:flet:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_21","eventName":"click","eventData":""}}
INFO:flet_core:page.on_event: _21 click 
DEBUG:flet:Closing connection...
DEBUG:flet:Flet View process 367581

Flet version (pip show flet):

Name: flet
Version: 0.5.1

Operating system:

Linux, Pop! OS

Additional environment details:

[FeodorFitsner]

OK, I've re-created your app locally.

I can see messages in the log.

Could you be more specific please what buttons should I click and what should be changed on UI once clicked?

[M0hawke]

Start app and click the buttons, they will work. Click to Journal then back to home and the buttons no longer update the text controls. At least for me...

[FeodorFitsner]

The issue has been fixed and fix will be available in Flet 0.5.2.
You can try the fix right now by upgrading to pre-release version of Flet: pip install flet --pre --upgrade.
Let me know how it worked.

[FeodorFitsner]

...when https://pypi.org/project/flet/0.6.0.dev1299/ is ready in a few minutes.

[M0hawke]

Wow! This is great as I have a lot of work in the app so far and I was at a loss. Thank you so much.