Saving "TextField" data from a "Keyboard Event" (with "errors filters") is ignored

[nastiliano]

Hello,

I have an application with an "IconButton" to save data from different TextFileds.

Before saving any data I have code to inform errors (for example putting only 1 char to avoid fields with only 1 character) and then, simply, cheking if different TextFields have an error:

if (self.icon_button.error_text == ""):
  ...

Just doing this I'm capable to filter 1 character fields avoiding to save wrong data.

The problem comes when I want a keys combination like (Ctrl+S) to emule the same (a click on the save "IconButton").

I tried to put the focus out (on the "IconButton") before doing the same, but the sata is saved ignoring the 1 character restrictions.

Is like putting firts the focus on another "Control" to check the errors was completly ignored.

Somebody with some idea?

Thank you very much.
Best regards.

[tanmay-bhatgare]

I would like to help but without entire code it won't be that helpful. Could you provide entire code?

[nastiliano]

Hello,

Here is a simple demo that I want:

import flet as ft


def main(page: ft.Page):
    appbar_text_ref = ft.Ref[ft.Text]()


    # EVENTS
    def handle_menu_item_click(e):
        print(f"{e.control.content.value}.on_click")
        page.open(ft.SnackBar(content=ft.Text(f"{e.control.content.value} was clicked!")))
        appbar_text_ref.current.value = e.control.content.value
        page.update()

    def handle_submenu_open(e):
        print(f"{e.control.content.value}.on_open")

    def handle_submenu_close(e):
        print(f"{e.control.content.value}.on_close")

    def handle_submenu_hover(e):
        print(f"{e.control.content.value}.on_hover")

    def other_events(e):
        # VALIDATE DATA AND OTHERS...
        pass


    # KEYBOARD EVENTS
        def keyboard_events(e):
        if e.ctrl and e.key == "S":
            # TEXT FIELD LOSES THE FOCUS
            # GO TO OTHER EVENTS TO VALIDATE DATA
            # IF VALIDATIONS ARE OK, THEN SAVE THE TEXTFIELD DATA/VALE
            pass


    # CREATE MENU BAR
    page.appbar = ft.AppBar(
        title=ft.Text("Menus", ref=appbar_text_ref),
        center_title=True,
        bgcolor=ft.colors.BLUE,
    )

    menubar = ft.MenuBar(
        expand=True,
        style=ft.MenuStyle(
            alignment=ft.alignment.top_left,
            bgcolor=ft.colors.RED_300,
            mouse_cursor={
                ft.ControlState.HOVERED: ft.MouseCursor.WAIT,
                ft.ControlState.DEFAULT: ft.MouseCursor.ZOOM_OUT,
            },
        ),
        controls=[
            ft.SubmenuButton(
                content=ft.Text("File"),
                on_open=handle_submenu_open,
                on_close=handle_submenu_close,
                on_hover=handle_submenu_hover,
                controls=[
                    ft.MenuItemButton(
                        content=ft.Text("About"),
                        leading=ft.Icon(ft.icons.INFO),
                        style=ft.ButtonStyle(
                            bgcolor={ft.ControlState.HOVERED: ft.colors.GREEN_100}
                        ),
                        on_click=handle_menu_item_click,
                    ),
                    ft.MenuItemButton(
                        content=ft.Text("Save"),
                        leading=ft.Icon(ft.icons.SAVE),
                        style=ft.ButtonStyle(
                            bgcolor={ft.ControlState.HOVERED: ft.colors.GREEN_100}
                         ),
                         on_click=handle_menu_item_click,
                    ),
                    ft.MenuItemButton(
                        content=ft.Text("Quit"),
                        leading=ft.Icon(ft.icons.CLOSE),
                        style=ft.ButtonStyle(
                            bgcolor={ft.ControlState.HOVERED: ft.colors.GREEN_100}
                        ),
                        on_click=handle_menu_item_click,
                    ),
                ],
            ),
            ft.SubmenuButton(
                content=ft.Text("View"),
                on_open=handle_submenu_open,
                on_close=handle_submenu_close,
                on_hover=handle_submenu_hover,
                controls=[
                    ft.SubmenuButton(
                        content=ft.Text("Zoom"),
                        controls=[
                            ft.MenuItemButton(
                                content=ft.Text("Magnify"),
                                leading=ft.Icon(ft.icons.ZOOM_IN),
                                close_on_click=False,
                                style=ft.ButtonStyle(
                                    bgcolor={
                                        ft.ControlState.HOVERED: ft.colors.PURPLE_200
                                    }
                                ),
                                on_click=handle_menu_item_click,
                            ),
                            ft.MenuItemButton(
                                content=ft.Text("Minify"),
                                leading=ft.Icon(ft.icons.ZOOM_OUT),
                                close_on_click=False,
                                style=ft.ButtonStyle(
                                    bgcolor={
                                        ft.ControlState.HOVERED: ft.colors.PURPLE_200
                                     }
                                 ),
                                on_click=handle_menu_item_click,
                            ),
                        ],
                    )
                ],
            ),
        ],   
    )


    # CREATE TEXTFIELD
    textfield = ft.TextField(autofocus = True ,
                             capitalization = "CHARACTERS" ,
                             data = "textfield" ,
                             error_text = "" ,
                             input_filter = ft.InputFilter(allow = True , regex_string = r"^\w*$") ,
                             label = "Just a sample" ,
                             max_length = 9 ,
                             on_blur = lambda e: other_events(e) ,
                             on_change = lambda e: other_events(e) ,
                             width = 400
                            )


    # CREATE KEYBOARD EVENTS
    page.on_keyboard_event = keyboard_events


    # CREATE PAGE
    page.add(ft.Row([menubar]) , 
             textfield)


ft.app(main)

Thanks. Best regards

[tanmay-bhatgare]

I think you problem is solved but want you to review it. I added two extra functions, validate_textfield and other_events one to validate textfield input and another one so when TextField changes or loses focus.

import flet as ft


def main(page: ft.Page):
    appbar_text_ref = ft.Ref[ft.Text]()

    def validate_textfield():
        if len(textfield.value) <= 1:
            textfield.error_text = "Field must have more than 1 character."
            page.update()
            return False
        textfield.error_text = ""
        page.update()
        return True

    def handle_menu_item_click(e):
        print(f"{e.control.content.value}.on_click")
        page.open(
            ft.SnackBar(content=ft.Text(f"{e.control.content.value} was clicked!"))
        )
        appbar_text_ref.current.value = e.control.content.value
        page.update()

    def handle_submenu_open(e):
        print(f"{e.control.content.value}.on_open")

    def handle_submenu_close(e):
        print(f"{e.control.content.value}.on_close")

    def handle_submenu_hover(e):
        print(f"{e.control.content.value}.on_hover")

    def other_events(e):
        validate_textfield()

    def keyboard_events(e):
        if e.ctrl and e.key == "S":
            print("Ctrl+S pressed.")

            if validate_textfield():
                print("Data saved with Ctrl+S.")
            else:
                print("Validation failed on Ctrl+S.")

    page.appbar = ft.AppBar(
        title=ft.Text("Menus", ref=appbar_text_ref),
        center_title=True,
        bgcolor=ft.colors.BLUE,
    )

    menubar = ft.MenuBar(
        expand=True,
        style=ft.MenuStyle(
            alignment=ft.alignment.top_left,
            bgcolor=ft.colors.RED_300,
            mouse_cursor={
                ft.ControlState.HOVERED: ft.MouseCursor.WAIT,
                ft.ControlState.DEFAULT: ft.MouseCursor.ZOOM_OUT,
            },
        ),
        controls=[
            ft.SubmenuButton(
                content=ft.Text("File"),
                on_open=handle_submenu_open,
                on_close=handle_submenu_close,
                on_hover=handle_submenu_hover,
                controls=[
                    ft.MenuItemButton(
                        content=ft.Text("About"),
                        leading=ft.Icon(ft.icons.INFO),
                        style=ft.ButtonStyle(
                            bgcolor={ft.ControlState.HOVERED: ft.colors.GREEN_100}
                        ),
                        on_click=handle_menu_item_click,
                    ),
                    ft.MenuItemButton(
                        content=ft.Text("Save"),
                        leading=ft.Icon(ft.icons.SAVE),
                        style=ft.ButtonStyle(
                            bgcolor={ft.ControlState.HOVERED: ft.colors.GREEN_100}
                        ),
                        on_click=handle_menu_item_click,
                    ),
                    ft.MenuItemButton(
                        content=ft.Text("Quit"),
                        leading=ft.Icon(ft.icons.CLOSE),
                        style=ft.ButtonStyle(
                            bgcolor={ft.ControlState.HOVERED: ft.colors.GREEN_100}
                        ),
                        on_click=handle_menu_item_click,
                    ),
                ],
            ),
            ft.SubmenuButton(
                content=ft.Text("View"),
                on_open=handle_submenu_open,
                on_close=handle_submenu_close,
                on_hover=handle_submenu_hover,
                controls=[
                    ft.SubmenuButton(
                        content=ft.Text("Zoom"),
                        controls=[
                            ft.MenuItemButton(
                                content=ft.Text("Magnify"),
                                leading=ft.Icon(ft.icons.ZOOM_IN),
                                close_on_click=False,
                                style=ft.ButtonStyle(
                                    bgcolor={
                                        ft.ControlState.HOVERED: ft.colors.PURPLE_200
                                    }
                                ),
                                on_click=handle_menu_item_click,
                            ),
                            ft.MenuItemButton(
                                content=ft.Text("Minify"),
                                leading=ft.Icon(ft.icons.ZOOM_OUT),
                                close_on_click=False,
                                style=ft.ButtonStyle(
                                    bgcolor={
                                        ft.ControlState.HOVERED: ft.colors.PURPLE_200
                                    }
                                ),
                                on_click=handle_menu_item_click,
                            ),
                        ],
                    )
                ],
            ),
        ],
    )

    textfield = ft.TextField(
        autofocus=True,
        capitalization="CHARACTERS",
        data="textfield",
        error_text="",
        input_filter=ft.InputFilter(allow=True, regex_string=r"^\w*$"),
        label="Just a sample",
        max_length=9,
        on_blur=lambda e: other_events(e),
        on_change=lambda e: other_events(e),
        width=400,
    )

    page.on_keyboard_event = keyboard_events

    page.add(ft.Row([menubar]), textfield)


ft.app(main)

Tell me if this wants any improvement.

[nastiliano]

SOLVED!!

Thank you very very much.

I was thinking about it, keyboard validate instead blur validation.

Thanks!