[Question] How to save focus for textfield, if i would clicked on other elements?

[ne4sp]

Question

I`m making virtual keyboard by flet, and faced with problem.

If i would pressed on button in virtual keyboard, focus switched from textfield to button, and i couldn`t write letters next.

I find half-solution: on every button bind func which will return focus to textfield. But text field anyway lost focus for 0.1s and started blinks.

P.S. If there anyone who need visual representation of my question i leave GIF asap.
P.S.S. i use this case to my desktop, fullscreen app, on pc with touchscreen, and that`s important to use it right in application.

Code sample

No response

Error message

No response

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

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

[ndonkoHenri]

Can you share code example for your approach? and perhaps the screenrecord too.

[ne4sp]

This variant with static keyboard(always open).

import flet as ft


def main(page: ft.Page):
    page.title = "VK"

    def on_key_press(e):
        if e.control.text == "Enter":
            ''
        elif e.control.text == "Backspace":
            textfield.value = textfield.value[:-1]
            textfield.focus()
        else:
            textfield.value += e.control.text
            textfield.focus()
        page.update()





    textfield = ft.TextField(
        label="write smh",
        read_only=True, 
    )
    keyboard_view = ft.Column(
        [
            ft.Row([ft.TextButton(text, on_click=on_key_press) for text in "1234567890"]),
            ft.Row([ft.TextButton(text, on_click=on_key_press) for text in "QWERTYUIOP"]),
            ft.Row([ft.TextButton(text, on_click=on_key_press) for text in "ASDFGHJKL"]),
            ft.Row([ft.TextButton(text, on_click=on_key_press) for text in "ZXCVBNM"]),
            ft.Row([
                ft.TextButton("Backspace", on_click=on_key_press),
                ft.TextButton("Enter", on_click=on_key_press),
            ]),
        ],
        visible=True,
    )

    page.add(textfield, keyboard_view)


ft.app(target=main)

VK.2025-03-25.20-11-32.mp4

[ne4sp]

Can you share code example for your approach? and perhaps the screenrecord too.

@ndonkoHenri, is any ideas how to solve this?

[Alexukg]

I didn’t quite understand the example, but if the TextField property is read_only, then why not use control Text?

or for the TextField add border="none"

[ne4sp]

In my case many TextFields, so it would be better for users, when they will see which Field they are filling.

[Razielthc]

He modificado tu código y pude obtener el siguiente resultado

import flet as ft


class KeyBoard(ft.Row):
    def __init__(self):
        super().__init__()
        self.visible = False
        self.textField = None
        self.controls = [ft.Column(
            [
                ft.Row([ft.TextButton(text, on_click=self.on_key_press, autofocus=False) for text in "1234567890"]),
                ft.Row([ft.TextButton(text, on_click=self.on_key_press, autofocus=False) for text in "QWERTYUIOP"]),
                ft.Row([ft.TextButton(text, on_click=self.on_key_press, autofocus=False) for text in "ASDFGHJKL"]),
                ft.Row([ft.TextButton(text, on_click=self.on_key_press, autofocus=False) for text in "ZXCVBNM"]),
                ft.Row([
                    ft.TextButton("Backspace", on_click=self.on_key_press),
                    ft.TextButton("Enter", on_click=self.on_key_press),
                ]),
            ],

        )]

    def on_key_press(self, e):
        self.textField.border_color = ft.Colors.PRIMARY
        self.textField.border_width = 2
        if e.control.text == "Enter":
            self.textField.border_color = ft.Colors.BLACK
            self.textField.border_width = 1
            self.visible = False

        elif e.control.text == "Backspace":
            self.textField.value = self.textField.value[:-1]
        else:
            self.textField.value += e.control.text

        self.page.update()


def main(page: ft.Page):
    page.title = "VK"
    keyboard = KeyBoard()

    def text_field_focus_on(e):
        if keyboard.visible is False:
            keyboard.textField = e.control
            keyboard.visible = True
            page.update()

    # def close_keyboard(keyboard):
    #     if keyboard in page:
    #         print(page.controls)
    #         print("si esta")
    #         page.remove(keyboard)

    textfield1 = ft.TextField(
        label="write smh",
        read_only=True,
        on_click=text_field_focus_on
    )

    textfield2 = ft.TextField(
        label="write smh",
        read_only=True,
        on_click=text_field_focus_on
    )

    page.add(textfield1, textfield2, keyboard)


ft.app(target=main)

Puntos a considerar
Ya que al hacer click en las letras de tu teclado virtual se llama al page.update esto hace que se pierda el foco del textfield por lo que tuve que simular el focus en el textfield aumentando el border_width y cambiando el color

Pudes intentar usar el on_blur metodo del textfield para ocultar el teclado