[Question] TextField content is selected by default when using a browser... not when using flet app

[s-celles]

Question

Hello,

TextField content is selected by default when using a browser... not when using flet app.

I don't understand why and I'm looking for a workaround to have in a browser the same behavior as in flet app.

Any idea?

Kind regards

Code sample

main.py

import flet as ft

def main(page: ft.Page):
    def textbox_changed(e):
        tb.value = tb.value.upper()
        t.value = e.control.value
        page.update()

    t = ft.Text()
    tb = ft.TextField(
        label="Textbox with 'change' event:",
        on_change=textbox_changed,
    )

    page.add(tb, t)

ft.app(target=main, view=ft.AppView.WEB_BROWSER)

Error message

Behavior of TextField is different when running

python main.py

and

flet run .

With a browser (Chrome for example) text is always selected... not with Flet app.

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

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

[s-celles]

The behavior with web browser is really problematic. When typing text the text in the textfield is selected and so is deleted after striking a new key. This is not the case with the app. Any idea what is wrong with such a small code ?

with browser

with Flet app

[FeodorFitsner]

That's an interesting issue.

But the idea is to "filter" input as the user types?

[s-celles]

By fixing I mean lower case should be upper cased but spaces, symbols should be replaced by an empty string

[s-celles]

My real example have functions like so

def allowed_room_name_char(c: str):
    if ord(c) >= ord("A") and ord(c) <= ord("Z"):
        return True
    elif ord(c) >= ord("0") and ord(c) <= ord("9"):
        return True
    else:
        return False


def fix_room_name(s: str):
    s = s.upper()
    return "".join([c if allowed_room_name_char(c) else "" for c in s])


def correct_room_name(s: str):
    fixed_room_name = fix_room_name(s)
    return fixed_room_name == s and len(s) > 0

[FeodorFitsner]

OK, I guess what we need is support for TextInputFormatter: https://medium.com/flutter-community/input-formatting-flutter-5237bf09e61f

Only, in the recent versions of Flutter it's replaced with FilteringTextInputFormatter.

Say, we could have two additional properties in TextField: allow_pattern and deny_pattern. Would it work?

[s-celles]

I think it could be a good improvement.

But it doesn't explain why the behavior about focus and text selection is different in browser and in app.

[FeodorFitsner]

It doesn't. Try adding multiple textfields? It feels like it's related to some auto-focus behavior which could be different between web and desktop.