Web: `TextField.focus()` after `on_submit` discards keys typed while the focus request is in flight

Aperta
  • Qualcosa non va?
#7,059 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
flutter, python, web-dev
Ambito
frontend, mobile-dev

Direzione di ricerca

Start by tracing how Enter affects TextField focus in the web client, then follow the client handling of the focus() method invoked from Python. The issue provides a minimal app and reproducible Playwright steps; use those to compare input value and active element around the focus request. Done means the retyped characters are preserved or Enter can keep focus, with the behavior verified against the reported cases.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Flet: 1.0.3 (stock, no other code). Browser: Chromium headless shell (Playwright), mobile emulation 390x844
with touch; macOS host. Mode: web (ft.run(main, view=None, port=8772)).

What happens

On web, pressing Enter in a TextField takes focus away from it: the field's <input> is removed and focus moves to
flutter-view. This happens with or without an on_submit handler. To let the user retype without tapping the field
again, the handler calls await field.focus(). Keys the user types after the Enter and before that focus request
lands in the client are lost. Once focus is back, the field holds only the keys typed after it arrived.

Minimal app

import flet as ft

def main(page: ft.Page):
    password = ft.TextField(label="Password", password=True)

    async def on_submit(e):
        print("submit", "empty" if not e.data else "nonempty")
        if not e.data:
            await password.focus()   # let the user retype without tapping the field

    password.on_submit = on_submit
    page.add(password)

ft.run(main, view=None, port=8772)

Steps

Each run uses a fresh browser context.

  1. Click the field.
  2. Press Enter with the field empty.
  3. Type a 14-character value with no click.
  4. Press Enter.

Each run records the DOM value and document.activeElement after every key, and compares the second on_submit
value with the typed text: exact, prefix lost, or empty.

Results (n=20 per arm)

arm timing second submit
focus() in the handler typing starts at once after the Enter 0/20 exact, 20/20 prefix lost
focus() in the handler typing starts 250 ms after the handler ran, then 120 ms per key 19/20 exact, 1/20 prefix lost
focus() only, no other update in the handler at once 0/20 exact, 20/20 prefix lost
no focus(), the test clicks the field again right after the Enter at once 20/20 exact
no focus(), no click 0.3 s after the handler ran the keys go nowhere: no second submit in 20/20
no on_submit at all; Enter caught by page.on_keyboard_event at once the field loses focus within a few keys of the Enter in 20/20; the retype never reaches it (second submit empty in 20/20)
no on_submit, no keyboard handler at once the same: the field loses focus after the Enter in 20/20 and keeps none of the retype

TextField.focus() is only _invoke_method("focus") on the Python side, so the reset happens in the web client when
the focus request is handled. In 2 runs the DOM <input> was briefly absent as the focus landed: the editing element
appears to be recreated.

Expected

Either:

  • Enter on a TextField can keep its focus (an option, or no blur when on_submit does not ask for it); or
  • focus() on a field that the user is already typing into keeps the characters typed so far.

Caveat

Playwright key events are not a phone's soft keyboard. We have not measured a real device's Go key.

Lingua principale
Python
Stelle
17.5k
Fork
740
Merge medio
1g 8h
PR unite (30g)
74

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di flet-dev/flet

Tutte le issue di flet-dev/flet

Issue simili

Altre issue su Python

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.