[Question] page.update() does not update the change of TextField in my code

[ningzichun]

Hello,

I have encountered an issue with the code that I am working on, and I was hoping to get some help from the community.

In the code, I have created a card for the user to click, which will then allow them to add a text field for selecting a file path. However, I have noticed that the page.update() function does not seem to be working properly, as the path is not shown until I click the card again, at which point the entire page updates.

A sample of the code that I am working with was pasted below.

If anyone has any suggestions on how to fix this issue, I would greatly appreciate it. Thank you in advance for your help!

Code sample

import flet as ft


def main(page: ft.Page):

    class ExtraParameters(ft.UserControl): # Add a control to the Column
        def __init__(self):
            super().__init__()
            self.Box = ft.Column([])

        def build(self):
            return self.Box

        def addParameterInput(self, key):
            fileTextField = ft.TextField(
                label=key, border=ft.InputBorder.UNDERLINE, hint_text="Select or input full path")
            fileTextField.on_focus = lambda _: getFileDialog(fileTextField)
            fileTextField.prefix =ft.Container(ft.FilledTonalButton("Select",icon = ft.icons.FILE_OPEN, on_click=lambda _:getFileDialog(fileTextField)))
            self.Box.controls.append(fileTextField)
            self.update()

    class ParameterCard(ft.UserControl):  # Cards for users to click
        def __init__(self, title, description, callback, type='text'):
            super().__init__()
            self.title = title
            self.description = description
            self.callback = callback
            self.type = type

        def build(self):
            return ft.Card(
                content=ft.Container(
                    content=ft.Column(
                        [
                            ft.ListTile(
                                title=ft.Text(self.title),
                                subtitle=ft.Text(self.description),
                            ),
                        ]
                    ),
                    on_click=lambda _: self.callback.addParameterInput(
                        self.title),
                    width=400,
                    padding=10,
                )
            )

    def getFileDialog(targetTextField): 
        get_input_file_dialog.pick_files(allow_multiple=False)
        get_input_file_dialog.targetTextField = targetTextField

    def get_input_file_result(e: ft.FilePickerResultEvent):
        e.control.targetTextField.value = e.files[0].path if e.files else "Cancelled!"
        e.control.page.update() # <---- TextField not updated

    get_input_file_dialog = ft.FilePicker(on_result=get_input_file_result)

    fileTextField = ft.TextField(label="This one works", border=ft.InputBorder.UNDERLINE, prefix=ft.Container(ft.Icon(ft.icons.FILE_OPEN), on_click=lambda _: getFileDialog(
        fileTextField)), hint_text="Select file", on_focus=lambda _: getFileDialog(fileTextField)) # This one works


    extra_parameters = ExtraParameters() # But ones in the Column do not work
    
    col = ft.Column([
        fileTextField
    ])

    page.add(get_input_file_dialog, col, extra_parameters, ParameterCard(
        "Add file", 'Click card to add a new line', extra_parameters))


ft.app(target=main)

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[holvi-mikael]

FAQ: The textfield is in a UserControl, and UserControls are not updated when the page is updated.

If you do not want this behavior, do not use UserControls, as I see nothing in your code requiring them. Just inherit ExtraParameters from Column and ParameterCard from Card, and move everything from build() to __init__().

[ningzichun]

I got it, Thank you!

[ndonkoHenri]

It is said in the docs that When dealing with UserControls, use self.update, to update the user control.