Tooltip corruption in `Segment` and `BarChartRod` on update()

[versionbayjc]

Duplicate Check

• I have searched the opened issues and there are no duplicates

Describe the bug

When removing a BarChart from a page and re-adding it later, the tooltips for the charts get escaped.

Is it not allowed to remove a BarChart and add it again (or any control)? It looks like a bug to me, but maybe I didn't find a good explanation on why I am not allowed to remove a control and re-add it.

The code sample is not very elegant, but by clicking the Hide and Show button from the sample app, every time the BarChart is re-added the tooltips get more escaped

Code sample

Code

import flet as ft

def main(page: ft.Page):

    chart = ft.BarChart(
        bar_groups=[
            ft.BarChartGroup(
                x=0,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=40,
                        width=40,
                        color=ft.colors.AMBER,
                        tooltip="Apple",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=1,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=100,
                        width=40,
                        color=ft.colors.BLUE,
                        tooltip="Blueberry",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=2,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=30,
                        width=40,
                        color=ft.colors.RED,
                        tooltip="Cherry",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=3,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=60,
                        width=40,
                        color=ft.colors.ORANGE,
                        tooltip="Orange",
                        border_radius=0,
                    ),
                ],
            ),
        ],
        border=ft.border.all(1, ft.colors.GREY_400),
        left_axis=ft.ChartAxis(
            labels_size=40, title=ft.Text("Fruit supply"), title_size=40
        ),
        bottom_axis=ft.ChartAxis(
            labels=[
                ft.ChartAxisLabel(
                    value=0, label=ft.Container(ft.Text("Apple"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=1, label=ft.Container(ft.Text("Blueberry"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=2, label=ft.Container(ft.Text("Cherry"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=3, label=ft.Container(ft.Text("Orange"), padding=10)
                ),
            ],
            labels_size=40,
        ),
        horizontal_grid_lines=ft.ChartGridLines(
            color=ft.colors.GREY_300, width=1, dash_pattern=[3, 3]
        ),
        tooltip_bgcolor=ft.colors.with_opacity(0.5, ft.colors.GREY_300),
        max_y=110,
        interactive=True,
        expand=True,
    )    

    def click_show(e):
        btn = e.control
        btn.disabled = True
        btn.update()

        col = page.controls[0]
        btnHide = col.controls[1]

        col.controls.insert(0, chart)
        col.update()

        btnHide.disabled = False
        btnHide.update()

    def click_hide(e):
        btn = e.control
        btn.disabled = True
        btn.update()

        col = page.controls[0]
        btnShow = col.controls[1]
        del(col.controls[0])
        col.update()

        btnShow.disabled = False
        btnShow.update()

    button_show = ft.ElevatedButton(text="Show Chart", disabled=True, on_click=click_show)
    button_hide = ft.ElevatedButton(text="Hide Chart", disabled=False, on_click=click_hide)
    col = ft.Column([chart, button_show, button_hide], expand=True)
    page.add(col)

ft.app(main)

To reproduce

Run the repro code,
inspect the tooltips
push hide & show buttons and inspect the tooltips again

Expected behavior

I expect the barchart to look the same after removing and re-adding it to the page (or Column)

Screenshots / Videos

Captures

original:

after 1 click:

after 3 clicks:

after 6 clicks:

Operating System

Windows

Operating system details

Windows 11 24H2

Flet version

0.24.1

Regression

I'm not sure / I don't know

Suggestions

No response

Logs

Logs

If I enable DEBUG logging with

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

I see pageControlsBatch data appearing with more and more \s for escaping

DEBUG:asyncio:Using proactor: IocpProactor
INFO:flet_runtime:Assets path configured: C:\Users\$UserName\src\fletBug\assets
DEBUG:flet_core:Creating new PubSubHub instance
DEBUG:flet_core:Creating new PubSubHub instance
INFO:flet_runtime:Starting up TCP server on localhost:50317
INFO:flet_runtime:Flet app has started...
DEBUG:flet_runtime:Connected new TCP client
DEBUG:flet_runtime:_on_message: {"action":"registerWebClient","payload":{"pageName":"","pageRoute":"/","pageWidth":"1264.0","pageHeight":"681.0","windowWidth":"1280.0","windowHeight":"720.0","windowTop":"10.0","windowLeft":"10.0","isPWA":"false","isWeb":"false","isDebug":"false","platform":"windows","platformBrightness":"light","media":"{\"padding\":{\"top\":0.0,\"right\":0.0,\"bottom\":0.0,\"left\":0.0},\"view_padding\":{\"top\":0.0,\"right\":0.0,\"bottom\":0.0,\"left\":0.0},\"view_insets\":{\"top\":0.0,\"right\":0.0,\"bottom\":0.0,\"left\":0.0}}","sessionId":""}}
DEBUG:flet_runtime:__send: {"action":"registerWebClient","payload":{"session":{"id":"","controls":{"page":{"i":"page","t":"page","p":"","c":[],"route":"/","width":"1264.0","height":"681.0","windowwidth":"1280.0","windowheight":"720.0","windowtop":"10.0","windowleft":"10.0","pwa":"false","web":"false","debug":"false","platform":"windows","platformBrightness":"light","media":"{\"padding\":{\"top\":0.0,\"right\":0.0,\"bottom\":0.0,\"left\":0.0},\"view_padding\":{\"top\":0.0,\"right\":0.0,\"bottom\":0.0,\"left\":0.0},\"view_insets\":{\"top\":0.0,\"right\":0.0,\"bottom\":0.0,\"left\":0.0}}"}}},"error":"","appInactive":false}}
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', 'debug'] {}
DEBUG:flet_core:_process_command: get ['page', 'platform'] {}
DEBUG:flet_core:_process_command: get ['page', 'platformBrightness'] {}
DEBUG:flet_core:_process_command: get ['page', 'media'] {}
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'] {}
DEBUG:flet_core:_process_command: get ['page', 'clientIP'] {}
DEBUG:flet_core:_process_command: get ['page', 'clientUserAgent'] {}
INFO:flet_runtime:App session started
DEBUG:flet_core:_process_command: add [] {'to': 'page', 'at': '0'}
DEBUG:flet_core:_process_command: add [] {'to': 'page', 'at': '1'}
DEBUG:flet_runtime:sent to TCP: 605
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"addPageControls","payload":{"controls":[{"t":"view","i":"_1","p":"page","c":["_2"],"at":"0"},{"t":"column","i":"_2","p":"_1","c":["_3","_27","_28"],"expand":"1"},{"t":"barchart","i":"_3","p":"_2","c":["_4","_6","_8","_10","_12","_14"],"border":"{\"l\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"t\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"r\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"b\":{\"w\":1,\"c\":\"grey400\",\"sa\":null}}","expand":"1","horizontalgridlines":"{\"color\":\"grey300\",\"width\":1,\"dash_pattern\":[3,3]}","interactive":"true","maxy":"110","tooltipbgcolor":"grey300,0.5"},{"t":"group","i":"_4","p":"_3","c":["_5"],"x":"0"},{"t":"rod","i":"_5","p":"_4","c":[],"borderradius":"0","color":"amber","fromy":"0","tooltip":"\"Apple\"","toy":"40","width":"40"},{"t":"group","i":"_6","p":"_3","c":["_7"],"x":"1"},{"t":"rod","i":"_7","p":"_6","c":[],"borderradius":"0","color":"blue","fromy":"0","tooltip":"\"Blueberry\"","toy":"100","width":"40"},{"t":"group","i":"_8","p":"_3","c":["_9"],"x":"2"},{"t":"rod","i":"_9","p":"_8","c":[],"borderradius":"0","color":"red","fromy":"0","tooltip":"\"Cherry\"","toy":"30","width":"40"},{"t":"group","i":"_10","p":"_3","c":["_11"],"x":"3"},{"t":"rod","i":"_11","p":"_10","c":[],"borderradius":"0","color":"orange","fromy":"0","tooltip":"\"Orange\"","toy":"60","width":"40"},{"t":"axis","i":"_12","p":"_3","c":["_13"],"labelssize":"40","n":"l","titlesize":"40"},{"t":"text","i":"_13","p":"_12","c":[],"n":"t","value":"Fruit supply"},{"t":"axis","i":"_14","p":"_3","c":["_15","_18","_21","_24"],"labelssize":"40","n":"b"},{"t":"l","i":"_15","p":"_14","c":["_16"],"n":"l","value":"0"},{"t":"container","i":"_16","p":"_15","c":["_17"],"padding":"10"},{"t":"text","i":"_17","p":"_16","c":[],"n":"content","value":"Apple"},{"t":"l","i":"_18","p":"_14","c":["_19"],"n":"l","value":"1"},{"t":"container","i":"_19","p":"_18","c":["_20"],"padding":"10"},{"t":"text","i":"_20","p":"_19","c":[],"n":"content","value":"Blueberry"},{"t":"l","i":"_21","p":"_14","c":["_22"],"n":"l","value":"2"},{"t":"container","i":"_22","p":"_21","c":["_23"],"padding":"10"},{"t":"text","i":"_23","p":"_22","c":[],"n":"content","value":"Cherry"},{"t":"l","i":"_24","p":"_14","c":["_25"],"n":"l","value":"3"},{"t":"container","i":"_25","p":"_24","c":["_26"],"padding":"10"},{"t":"text","i":"_26","p":"_25","c":[],"n":"content","value":"Orange"},{"t":"elevatedbutton","i":"_27","p":"_2","c":[],"disabled":"true","text":"Show Chart"},{"t":"elevatedbutton","i":"_28","p":"_2","c":[],"disabled":"false","text":"Hide Chart"}],"trimIDs":[]}},{"action":"addPageControls","payload":{"controls":[{"t":"offstage","i":"_29","p":"page","c":[],"at":"1"}],"trimIDs":[]}}]}
DEBUG:flet_runtime:sent to TCP: 2736
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"click","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 click 
DEBUG:flet_core:_process_command: set ['_28'] {'disabled': 'true'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_28","disabled":"true"}]}}]}
DEBUG:flet_core:_process_command: remove ['_3'] {}
DEBUG:flet_runtime:sent to TCP: 130
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"removeControl","payload":{"ids":["_3"]}}]}
DEBUG:flet_core:_process_command: set ['_27'] {'disabled': 'false'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_27","disabled":"false"}]}}]}
DEBUG:flet_runtime:sent to TCP: 98
DEBUG:flet_runtime:sent to TCP: 131
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"click","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 click 
DEBUG:flet_core:_process_command: set ['_27'] {'disabled': 'true'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_27","disabled":"true"}]}}]}
DEBUG:flet_core:_process_command: add [] {'to': '_2', 'at': '0'}
DEBUG:flet_runtime:sent to TCP: 130
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"addPageControls","payload":{"controls":[{"t":"barchart","i":"_3","p":"_2","c":["_4","_6","_8","_10","_12","_14"],"at":"0","border":"{\"l\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"t\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"r\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"b\":{\"w\":1,\"c\":\"grey400\",\"sa\":null}}","expand":"1","horizontalgridlines":"{\"color\":\"grey300\",\"width\":1,\"dash_pattern\":[3,3]}","interactive":"true","maxy":"110","tooltipbgcolor":"grey300,0.5"},{"t":"group","i":"_4","p":"_3","c":["_5"],"x":"0"},{"t":"rod","i":"_5","p":"_4","c":[],"borderradius":"0","color":"amber","fromy":"0","tooltip":"\"\\\"Apple\\\"\"","toy":"40","width":"40"},{"t":"group","i":"_6","p":"_3","c":["_7"],"x":"1"},{"t":"rod","i":"_7","p":"_6","c":[],"borderradius":"0","color":"blue","fromy":"0","tooltip":"\"\\\"Blueberry\\\"\"","toy":"100","width":"40"},{"t":"group","i":"_8","p":"_3","c":["_9"],"x":"2"},{"t":"rod","i":"_9","p":"_8","c":[],"borderradius":"0","color":"red","fromy":"0","tooltip":"\"\\\"Cherry\\\"\"","toy":"30","width":"40"},{"t":"group","i":"_10","p":"_3","c":["_11"],"x":"3"},{"t":"rod","i":"_11","p":"_10","c":[],"borderradius":"0","color":"orange","fromy":"0","tooltip":"\"\\\"Orange\\\"\"","toy":"60","width":"40"},{"t":"axis","i":"_12","p":"_3","c":["_13"],"labelssize":"40","n":"l","titlesize":"40"},{"t":"text","i":"_13","p":"_12","c":[],"n":"t","value":"Fruit supply"},{"t":"axis","i":"_14","p":"_3","c":["_15","_18","_21","_24"],"labelssize":"40","n":"b"},{"t":"l","i":"_15","p":"_14","c":["_16"],"n":"l","value":"0"},{"t":"container","i":"_16","p":"_15","c":["_17"],"padding":"10"},{"t":"text","i":"_17","p":"_16","c":[],"n":"content","value":"Apple"},{"t":"l","i":"_18","p":"_14","c":["_19"],"n":"l","value":"1"},{"t":"container","i":"_19","p":"_18","c":["_20"],"padding":"10"},{"t":"text","i":"_20","p":"_19","c":[],"n":"content","value":"Blueberry"},{"t":"l","i":"_21","p":"_14","c":["_22"],"n":"l","value":"2"},{"t":"container","i":"_22","p":"_21","c":["_23"],"padding":"10"},{"t":"text","i":"_23","p":"_22","c":[],"n":"content","value":"Cherry"},{"t":"l","i":"_24","p":"_14","c":["_25"],"n":"l","value":"3"},{"t":"container","i":"_25","p":"_24","c":["_26"],"padding":"10"},{"t":"text","i":"_26","p":"_25","c":[],"n":"content","value":"Orange"}],"trimIDs":[]}}]}
DEBUG:flet_core:_process_command: set ['_28'] {'disabled': 'false'}
DEBUG:flet_runtime:sent to TCP: 2359
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_28","disabled":"false"}]}}]}
DEBUG:flet_runtime:sent to TCP: 131
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"click","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 click 
DEBUG:flet_core:_process_command: set ['_28'] {'disabled': 'true'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_28","disabled":"true"}]}}]}
DEBUG:flet_core:_process_command: remove ['_3'] {}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"removeControl","payload":{"ids":["_3"]}}]}
DEBUG:flet_runtime:sent to TCP: 130
DEBUG:flet_core:_process_command: set ['_27'] {'disabled': 'false'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_27","disabled":"false"}]}}]}
DEBUG:flet_runtime:sent to TCP: 98
DEBUG:flet_runtime:sent to TCP: 131
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"click","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 click 
DEBUG:flet_core:_process_command: set ['_27'] {'disabled': 'true'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_27","disabled":"true"}]}}]}
DEBUG:flet_core:_process_command: add [] {'to': '_2', 'at': '0'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"addPageControls","payload":{"controls":[{"t":"barchart","i":"_3","p":"_2","c":["_4","_6","_8","_10","_12","_14"],"at":"0","border":"{\"l\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"t\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"r\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"b\":{\"w\":1,\"c\":\"grey400\",\"sa\":null}}","expand":"1","horizontalgridlines":"{\"color\":\"grey300\",\"width\":1,\"dash_pattern\":[3,3]}","interactive":"true","maxy":"110","tooltipbgcolor":"grey300,0.5"},{"t":"group","i":"_4","p":"_3","c":["_5"],"x":"0"},{"t":"rod","i":"_5","p":"_4","c":[],"borderradius":"0","color":"amber","fromy":"0","tooltip":"\"\\\"\\\\\\\"Apple\\\\\\\"\\\"\"","toy":"40","width":"40"},{"t":"group","i":"_6","p":"_3","c":["_7"],"x":"1"},{"t":"rod","i":"_7","p":"_6","c":[],"borderradius":"0","color":"blue","fromy":"0","tooltip":"\"\\\"\\\\\\\"Blueberry\\\\\\\"\\\"\"","toy":"100","width":"40"},{"t":"group","i":"_8","p":"_3","c":["_9"],"x":"2"},{"t":"rod","i":"_9","p":"_8","c":[],"borderradius":"0","color":"red","fromy":"0","tooltip":"\"\\\"\\\\\\\"Cherry\\\\\\\"\\\"\"","toy":"30","width":"40"},{"t":"group","i":"_10","p":"_3","c":["_11"],"x":"3"},{"t":"rod","i":"_11","p":"_10","c":[],"borderradius":"0","color":"orange","fromy":"0","tooltip":"\"\\\"\\\\\\\"Orange\\\\\\\"\\\"\"","toy":"60","width":"40"},{"t":"axis","i":"_12","p":"_3","c":["_13"],"labelssize":"40","n":"l","titlesize":"40"},{"t":"text","i":"_13","p":"_12","c":[],"n":"t","value":"Fruit supply"},{"t":"axis","i":"_14","p":"_3","c":["_15","_18","_21","_24"],"labelssize":"40","n":"b"},{"t":"l","i":"_15","p":"_14","c":["_16"],"n":"l","value":"0"},{"t":"container","i":"_16","p":"_15","c":["_17"],"padding":"10"},{"t":"text","i":"_17","p":"_16","c":[],"n":"content","value":"Apple"},{"t":"l","i":"_18","p":"_14","c":["_19"],"n":"l","value":"1"},{"t":"container","i":"_19","p":"_18","c":["_20"],"padding":"10"},{"t":"text","i":"_20","p":"_19","c":[],"n":"content","value":"Blueberry"},{"t":"l","i":"_21","p":"_14","c":["_22"],"n":"l","value":"2"},{"t":"container","i":"_22","p":"_21","c":["_23"],"padding":"10"},{"t":"text","i":"_23","p":"_22","c":[],"n":"content","value":"Cherry"},{"t":"l","i":"_24","p":"_14","c":["_25"],"n":"l","value":"3"},{"t":"container","i":"_25","p":"_24","c":["_26"],"padding":"10"},{"t":"text","i":"_26","p":"_25","c":[],"n":"content","value":"Orange"}],"trimIDs":[]}}]}
DEBUG:flet_runtime:sent to TCP: 130
DEBUG:flet_core:_process_command: set ['_28'] {'disabled': 'false'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_28","disabled":"false"}]}}]}
DEBUG:flet_runtime:sent to TCP: 2423
DEBUG:flet_runtime:sent to TCP: 131
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"click","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 click 
DEBUG:flet_core:_process_command: set ['_28'] {'disabled': 'true'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_28","disabled":"true"}]}}]}
DEBUG:flet_core:_process_command: remove ['_3'] {}
DEBUG:flet_runtime:sent to TCP: 130
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"removeControl","payload":{"ids":["_3"]}}]}
DEBUG:flet_core:_process_command: set ['_27'] {'disabled': 'false'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_27","disabled":"false"}]}}]}
DEBUG:flet_runtime:sent to TCP: 98
DEBUG:flet_runtime:sent to TCP: 131
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"click","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 click 
DEBUG:flet_core:_process_command: set ['_27'] {'disabled': 'true'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_27","disabled":"true"}]}}]}
DEBUG:flet_core:_process_command: add [] {'to': '_2', 'at': '0'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"addPageControls","payload":{"controls":[{"t":"barchart","i":"_3","p":"_2","c":["_4","_6","_8","_10","_12","_14"],"at":"0","border":"{\"l\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"t\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"r\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"b\":{\"w\":1,\"c\":\"grey400\",\"sa\":null}}","expand":"1","horizontalgridlines":"{\"color\":\"grey300\",\"width\":1,\"dash_pattern\":[3,3]}","interactive":"true","maxy":"110","tooltipbgcolor":"grey300,0.5"},{"t":"group","i":"_4","p":"_3","c":["_5"],"x":"0"},{"t":"rod","i":"_5","p":"_4","c":[],"borderradius":"0","color":"amber","fromy":"0","tooltip":"\"\\\"\\\\\\\"\\\\\\\\\\\\\\\"Apple\\\\\\\\\\\\\\\"\\\\\\\"\\\"\"","toy":"40","width":"40"},{"t":"group","i":"_6","p":"_3","c":["_7"],"x":"1"},{"t":"rod","i":"_7","p":"_6","c":[],"borderradius":"0","color":"blue","fromy":"0","tooltip":"\"\\\"\\\\\\\"\\\\\\\\\\\\\\\"Blueberry\\\\\\\\\\\\\\\"\\\\\\\"\\\"\"","toy":"100","width":"40"},{"t":"group","i":"_8","p":"_3","c":["_9"],"x":"2"},{"t":"rod","i":"_9","p":"_8","c":[],"borderradius":"0","color":"red","fromy":"0","tooltip":"\"\\\"\\\\\\\"\\\\\\\\\\\\\\\"Cherry\\\\\\\\\\\\\\\"\\\\\\\"\\\"\"","toy":"30","width":"40"},{"t":"group","i":"_10","p":"_3","c":["_11"],"x":"3"},{"t":"rod","i":"_11","p":"_10","c":[],"borderradius":"0","color":"orange","fromy":"0","tooltip":"\"\\\"\\\\\\\"\\\\\\\\\\\\\\\"Orange\\\\\\\\\\\\\\\"\\\\\\\"\\\"\"","toy":"60","width":"40"},{"t":"axis","i":"_12","p":"_3","c":["_13"],"labelssize":"40","n":"l","titlesize":"40"},{"t":"text","i":"_13","p":"_12","c":[],"n":"t","value":"Fruit supply"},{"t":"axis","i":"_14","p":"_3","c":["_15","_18","_21","_24"],"labelssize":"40","n":"b"},{"t":"l","i":"_15","p":"_14","c":["_16"],"n":"l","value":"0"},{"t":"container","i":"_16","p":"_15","c":["_17"],"padding":"10"},{"t":"text","i":"_17","p":"_16","c":[],"n":"content","value":"Apple"},{"t":"l","i":"_18","p":"_14","c":["_19"],"n":"l","value":"1"},{"t":"container","i":"_19","p":"_18","c":["_20"],"padding":"10"},{"t":"text","i":"_20","p":"_19","c":[],"n":"content","value":"Blueberry"},{"t":"l","i":"_21","p":"_14","c":["_22"],"n":"l","value":"2"},{"t":"container","i":"_22","p":"_21","c":["_23"],"padding":"10"},{"t":"text","i":"_23","p":"_22","c":[],"n":"content","value":"Cherry"},{"t":"l","i":"_24","p":"_14","c":["_25"],"n":"l","value":"3"},{"t":"container","i":"_25","p":"_24","c":["_26"],"padding":"10"},{"t":"text","i":"_26","p":"_25","c":[],"n":"content","value":"Orange"}],"trimIDs":[]}}]}
DEBUG:flet_runtime:sent to TCP: 130
DEBUG:flet_core:_process_command: set ['_28'] {'disabled': 'false'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_28","disabled":"false"}]}}]}
DEBUG:flet_runtime:sent to TCP: 2551
DEBUG:flet_runtime:sent to TCP: 131
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 blur 
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"click","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 click 
DEBUG:flet_core:_process_command: set ['_28'] {'disabled': 'true'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_28","disabled":"true"}]}}]}
DEBUG:flet_core:_process_command: remove ['_3'] {}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"removeControl","payload":{"ids":["_3"]}}]}
DEBUG:flet_runtime:sent to TCP: 130
DEBUG:flet_core:_process_command: set ['_27'] {'disabled': 'false'}
DEBUG:flet_runtime:sent to TCP: 98
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_27","disabled":"false"}]}}]}
DEBUG:flet_runtime:sent to TCP: 131
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"click","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 click 
DEBUG:flet_core:_process_command: set ['_27'] {'disabled': 'true'}
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_27","disabled":"true"}]}}]}
DEBUG:flet_core:_process_command: add [] {'to': '_2', 'at': '0'}
DEBUG:flet_runtime:sent to TCP: 130
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"addPageControls","payload":{"controls":[{"t":"barchart","i":"_3","p":"_2","c":["_4","_6","_8","_10","_12","_14"],"at":"0","border":"{\"l\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"t\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"r\":{\"w\":1,\"c\":\"grey400\",\"sa\":null},\"b\":{\"w\":1,\"c\":\"grey400\",\"sa\":null}}","expand":"1","horizontalgridlines":"{\"color\":\"grey300\",\"width\":1,\"dash_pattern\":[3,3]}","interactive":"true","maxy":"110","tooltipbgcolor":"grey300,0.5"},{"t":"group","i":"_4","p":"_3","c":["_5"],"x":"0"},{"t":"rod","i":"_5","p":"_4","c":[],"borderradius":"0","color":"amber","fromy":"0","tooltip":"\"\\\"\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"Apple\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\"\\\"\"","toy":"40","width":"40"},{"t":"group","i":"_6","p":"_3","c":["_7"],"x":"1"},{"t":"rod","i":"_7","p":"_6","c":[],"borderradius":"0","color":"blue","fromy":"0","tooltip":"\"\\\"\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"Blueberry\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\"\\\"\"","toy":"100","width":"40"},{"t":"group","i":"_8","p":"_3","c":["_9"],"x":"2"},{"t":"rod","i":"_9","p":"_8","c":[],"borderradius":"0","color":"red","fromy":"0","tooltip":"\"\\\"\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"Cherry\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\"\\\"\"","toy":"30","width":"40"},{"t":"group","i":"_10","p":"_3","c":["_11"],"x":"3"},{"t":"rod","i":"_11","p":"_10","c":[],"borderradius":"0","color":"orange","fromy":"0","tooltip":"\"\\\"\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"Orange\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\"\\\\\\\"\\\"\"","toy":"60","width":"40"},{"t":"axis","i":"_12","p":"_3","c":["_13"],"labelssize":"40","n":"l","titlesize":"40"},{"t":"text","i":"_13","p":"_12","c":[],"n":"t","value":"Fruit supply"},{"t":"axis","i":"_14","p":"_3","c":["_15","_18","_21","_24"],"labelssize":"40","n":"b"},{"t":"l","i":"_15","p":"_14","c":["_16"],"n":"l","value":"0"},{"t":"container","i":"_16","p":"_15","c":["_17"],"padding":"10"},{"t":"text","i":"_17","p":"_16","c":[],"n":"content","value":"Apple"},{"t":"l","i":"_18","p":"_14","c":["_19"],"n":"l","value":"1"},{"t":"container","i":"_19","p":"_18","c":["_20"],"padding":"10"},{"t":"text","i":"_20","p":"_19","c":[],"n":"content","value":"Blueberry"},{"t":"l","i":"_21","p":"_14","c":["_22"],"n":"l","value":"2"},{"t":"container","i":"_22","p":"_21","c":["_23"],"padding":"10"},{"t":"text","i":"_23","p":"_22","c":[],"n":"content","value":"Cherry"},{"t":"l","i":"_24","p":"_14","c":["_25"],"n":"l","value":"3"},{"t":"container","i":"_25","p":"_24","c":["_26"],"padding":"10"},{"t":"text","i":"_26","p":"_25","c":[],"n":"content","value":"Orange"}],"trimIDs":[]}}]}
DEBUG:flet_core:_process_command: set ['_28'] {'disabled': 'false'}
DEBUG:flet_runtime:sent to TCP: 2807
DEBUG:flet_runtime:__send: {"action":"pageControlsBatch","payload":[{"action":"updateControlProps","payload":{"props":[{"i":"_28","disabled":"false"}]}}]}
DEBUG:flet_runtime:sent to TCP: 131
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_27","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _27 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"_28","eventName":"blur","eventData":""}}
DEBUG:flet_core:page.on_event_async: _28 blur
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"page","eventName":"app_lifecycle_state_change","eventData":"inactive"}}
DEBUG:flet_core:page.on_event_async: page app_lifecycle_state_change inactive
DEBUG:flet_runtime:_on_message: {"action":"pageEventFromWeb","payload":{"eventTarget":"page","eventName":"app_lifecycle_state_change","eventData":"hide"}}
DEBUG:flet_core:page.on_event_async: page app_lifecycle_state_change hide

Additional details

No response

[versionbayjc]

In my actual application I will either choose to recreate the controls from scratch or toggle their visibility (which would have been much better/easier in this sample app as well), but even so, I thought that keeping the control in a class property and re-adding it when needed, would not cause this tooltip "corruption"

[versionbayjc]

I tried to "refactor" this example a bit, by just toggling the visibility of the chart and updating the page, but that actually didn't help. I still see the tooltips changing with \:

import flet as ft


class App:
    page = None
    chart = None
    button_show = None
    button_hide = None
    controls = None

    def __init__(self, page):
        self.page = page
        self.chart = generate_chart()
        self.button_show = ft.ElevatedButton(
            text="Show Chart", disabled=True, on_click=self.show_chart
        )
        self.button_hide = ft.ElevatedButton(
            text="Hide Chart", disabled=False, on_click=self.hide_chart
        )

        self.controls = ft.Column(
            [self.chart, self.button_show, self.button_hide], expand=True
        )

    def show_chart(self, e):
        self.chart.visible = True
        self.button_show.disabled = True
        self.button_hide.disabled = False

        self.page.update()

    def hide_chart(self, e):
        self.chart.visible = False
        self.button_show.disabled = False
        self.button_hide.disabled = True

        self.page.update()


def main(page: ft.Page):
    app = App(page)
    page.add(app.controls)


def generate_chart():
    chart = ft.BarChart(
        bar_groups=[
            ft.BarChartGroup(
                x=0,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=40,
                        width=40,
                        color=ft.colors.AMBER,
                        tooltip="Apple",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=1,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=100,
                        width=40,
                        color=ft.colors.BLUE,
                        tooltip="Blueberry",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=2,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=30,
                        width=40,
                        color=ft.colors.RED,
                        tooltip="Cherry",
                        border_radius=0,
                    ),
                ],
            ),
            ft.BarChartGroup(
                x=3,
                bar_rods=[
                    ft.BarChartRod(
                        from_y=0,
                        to_y=60,
                        width=40,
                        color=ft.colors.ORANGE,
                        tooltip="Orange",
                        border_radius=0,
                    ),
                ],
            ),
        ],
        border=ft.border.all(1, ft.colors.GREY_400),
        left_axis=ft.ChartAxis(
            labels_size=40, title=ft.Text("Fruit supply"), title_size=40
        ),
        bottom_axis=ft.ChartAxis(
            labels=[
                ft.ChartAxisLabel(
                    value=0, label=ft.Container(ft.Text("Apple"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=1, label=ft.Container(ft.Text("Blueberry"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=2, label=ft.Container(ft.Text("Cherry"), padding=10)
                ),
                ft.ChartAxisLabel(
                    value=3, label=ft.Container(ft.Text("Orange"), padding=10)
                ),
            ],
            labels_size=40,
        ),
        horizontal_grid_lines=ft.ChartGridLines(
            color=ft.colors.GREY_300, width=1, dash_pattern=[3, 3]
        ),
        tooltip_bgcolor=ft.colors.with_opacity(0.5, ft.colors.GREY_300),
        max_y=110,
        interactive=True,
        expand=True,
    )

    return chart


ft.app(main)

[ndonkoHenri]

Yeah, this is a bug.

Repro Code

import time

import flet as ft


class MyChart(ft.BarChart):
    def __init__(self):
        super().__init__(
            max_y=110,
            expand=True,
            bar_groups=[
                ft.BarChartGroup(
                    x=0,
                    bar_rods=[
                        ft.BarChartRod(
                            from_y=0,
                            to_y=40,
                            width=40,
                            color=ft.colors.AMBER,
                            tooltip="Apple",
                            border_radius=0,
                        ),
                    ],
                ),
            ],
        )

    def did_mount(self):
        print("Init:", self.bar_groups[0].bar_rods[0].tooltip)
        self.hide_chart()
        time.sleep(1)
        self.show_chart()

    def show_chart(self):
        self.visible = True
        self.page.update()
        print("Chart is visible:", self.bar_groups[0].bar_rods[0].tooltip)

    def hide_chart(self):
        self.visible = False
        self.page.update()
        print("Chart is hidden:", self.bar_groups[0].bar_rods[0].tooltip)


def main(page: ft.Page):
    page.add(MyChart())


ft.app(main)

Actual Output

Init: Apple
Chart is hidden: "\"Apple\""
Chart is visible: "\"\\\"Apple\\\"\""

Expected Output

Init: Apple
Chart is hidden: Apple
Chart is visible: Apple