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

Đang mở
  • Có gì không ổn?
#7,059 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
45/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
flutter, python, web-dev
Lĩnh vực
frontend, mobile-dev

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
Python
Star
17.5k
Fork
740
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
74

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của flet-dev/flet

Tất cả issue của flet-dev/flet

Issue tương tự

Thêm issue về Python

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.