Textfield colors updates not working

[valer85]

Hi Everybody,
why textfield color properties are not working/updating?
Simple example:
I try to change background color of a textfield and container on text submit. Container works, textfield doesn't. But even before the update event, the bg color is not even set.

import flet as ft

def main(page: ft.Page):
    def textbox_changed(e):
        e.bgcolor = ft.colors.RED
        c.bgcolor = ft.colors.RED
        page.update()

    c = ft.Container(
        content=ft.Text('test'),
        bgcolor=ft.colors.YELLOW,
        padding=5,
    )

    tb = ft.TextField(
        bgcolor = ft.colors.AMBER,
        label="Textbox with 'change' event:",
        on_submit=textbox_changed,
    )

    page.add(tb, c)

ft.app(target=main)

the only way to have control of the textfield colors is to wrap it with a container, but then the color properties of the textfield looks useless..

[ndonkoHenri]

What is your flet version please? A PR was made to solve this issue automatically: #807. I think you have to upgrade your flet version to latest.

But to fix your problem,

First, modify the first line in your function from e to tb.

def textbox_changed(e):
   tb.bgcolor = ft.colors.RED
   # ...

Then, add filled=True to your TextField (docs)

[valer85]

Thank you for your reply.
I have the latest version 0.3.2
It does not work even with the modification you suggested ..
filled property works for the initial background set, but the update function does not affect my page

Same problem if I try to set the text color inside the textfield..

[ndonkoHenri]

So, I tried your code with the flet v0.4.0.dev1117, and the only change you have to make having this version is to change e.bgcolor to tb.bgcolor. Below is the full code with that one line modification. It works as expected.

import flet as ft

def main(page: ft.Page):
    def textbox_changed(e):
        tb.bgcolor = ft.colors.RED   ### <-------------------- change e.bgcolor to tb.bgcolor
        c.bgcolor = ft.colors.RED
        page.update()

    c = ft.Container(
        content=ft.Text('test'),
        bgcolor=ft.colors.YELLOW,
        padding=5,
    )

    tb = ft.TextField(
        bgcolor=ft.colors.AMBER,
        label="Textbox with 'change' event:",
        on_submit=textbox_changed
    )

    page.add(tb, c)


ft.app(target=main)

If you don't want to upgrade to one of the latest pre-release, and still want to use the v0.3.2, then follow what I said in my last comment. Here is the code:

import flet as ft

def main(page: ft.Page):
    def textbox_changed(e):
        tb.bgcolor = ft.colors.RED    ### <------------------------------- change e.bgcolor to tb.bgcolor
        c.bgcolor = ft.colors.RED
        page.update()

    c = ft.Container(
        content=ft.Text('test'),
        bgcolor=ft.colors.YELLOW,
        padding=5,
    )

    tb = ft.TextField(
        bgcolor=ft.colors.AMBER,
        label="Textbox with 'change' event:",
        on_submit=textbox_changed,
        filled=True  ### <--------------------------------------add this prop
    )

    page.add(tb, c)


ft.app(target=main)

The PR #807 is not present in v0.3.2 hence if you stay on this version, you must explicitly set the filled=True when creating your TextField as I did. You could eventually just set the filled=True every time and in any flet version.

Hope I could help you.

[valer85]

thank you for taking the time of testing this.
It works for me as well, I updated to 0.4.0.

But so I don't get what is the purpose of having e as argument of the function textbox_changed(e) if we can't use it (or probably I'm missing something).
By changing e.bgcolor to tb.bgcolor we lose control on the object generating the event.
This example is an easy one, but if we have a grid or table of buttons/textfield dinamically generated, when one of them is clicked/edited, we have no info at all on which one was the owner of the event.

Am I right?

[ndonkoHenri]

e Is of type ControlEvent.
See it as the parameter that your event (on_change for example) passes to your callback automatically.
you can rename that e to whatever you want. We have just been sticking with e (for event).

If you want to grab the control that triggered the event (the event owner as you say), then use e.control and for any property the control has (bgcolor for example) e.control.bgcolor is your guy.
That e has several other properties ex: e.page.

[valer85]

good to know, thank you!
one last question: is there any documentation describing the properties of this ControlEvent ?

[ndonkoHenri]

I don't think so. But you can have a look at it from here(the __init__ parameters): https://github.com/flet-dev/flet/blob/main/sdk/python/packages/flet-core/src/flet_core/control_event.py
---> control, page, target, name, data
Try to print them out in your callback to see the contents of each.

print(e.control, e.page, e.target, e.name, e.data)

[valer85]

thank you for all the info, I appreciate it!