Thanks to visit codestin.com
Credit goes to github.com

Skip to content

TextField doesn't lose focus after tap done button of keyboard in web #153616

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OlehSv opened this issue Aug 17, 2024 · 8 comments
Open

TextField doesn't lose focus after tap done button of keyboard in web #153616

OlehSv opened this issue Aug 17, 2024 · 8 comments
Assignees
Labels
a: text input Entering text in a text field or keyboard related problems browser: safari-ios only manifests in Safari on iOS c: regression It was better in the past than it is now f: focus Focus traversal, gaining or losing focus found in release: 3.24 Found to occur in 3.24 framework flutter/packages/flutter repository. See also f: labels. fyi-text-input For the attention of Text Input team has reproducible steps The issue has been confirmed reproducible and is ready to work on P1 High-priority issues at the top of the work list platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team

Comments

@OlehSv
Copy link

OlehSv commented Aug 17, 2024

Issue is reproducible only for flutter 3.24.0. For flutter 3.22.3 it works okay

Steps to reproduce

  1. Start app with code from example.
  2. Select field
  3. Tap done button over keyboard

Expected results

Field lost focus

Actual results

Field still has focus

Code sample

Code sample
void main() async {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: TextField(),
        ),
      ),
    ),
  );

Screenshots or Video

Login

Flutter Doctor output

Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.0, on macOS 14.6.1 23G93 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.92.1)
[✓] Connected device (4 available)
    ! Error: Browsing on the local area network for iPad (Лиля). Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

• No issues found!
@huycozy huycozy added the in triage Presently being triaged by the triage team label Aug 19, 2024
@huycozy
Copy link
Member

huycozy commented Aug 19, 2024

Thank you for the report. I can also observe the issue as reported on Flutter master channel 3.24.0-1.0.pre.623.

I only see the issue on iOS's Safari browser. On iOS's Chrome browser, the TextField loses focus as desired.

flutter doctor -v
[!] Flutter (Channel master, 3.24.0-1.0.pre.623, on macOS 14.6 23G80 darwin-x64, locale en-VN)
    • Flutter version 3.24.0-1.0.pre.623 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9d9e0a90 (10 hours ago), 2024-08-18 13:24:40 -0400
    • Engine revision d0d7de5c33
    • Dart version 3.6.0 (build 3.6.0-149.3.beta)
    • DevTools version 2.38.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode15.4.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1)
    • Android Studio at /Applications/Android Studio Koala.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)

[✓] Android Studio (version 2023.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

[✓] VS Code (version 1.92.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.94.0

[✓] Connected device (3 available)
    • Pixel 7 (mobile) • 2B171FDH20084L • android-arm64  • Android 14 (API 34)
    • macOS (desktop)  • macos          • darwin-x64     • macOS 14.6 23G80 darwin-x64
    • Chrome (web)     • chrome         • web-javascript • Google Chrome 127.0.6533.120

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

@huycozy huycozy added a: text input Entering text in a text field or keyboard related problems c: regression It was better in the past than it is now framework flutter/packages/flutter repository. See also f: labels. platform-web Web applications specifically f: focus Focus traversal, gaining or losing focus has reproducible steps The issue has been confirmed reproducible and is ready to work on fyi-web For the attention of Web platform team team-text-input Owned by Text Input team found in release: 3.24 Found to occur in 3.24 browser: safari-ios only manifests in Safari on iOS and removed in triage Presently being triaged by the triage team labels Aug 19, 2024
@jason-simmons
Copy link
Member

This changed due to flutter/engine@63c2403

@ditman

@justinmc justinmc added team-web Owned by Web platform team fyi-text-input For the attention of Text Input team and removed fyi-web For the attention of Web platform team team-text-input Owned by Text Input team labels Aug 22, 2024
@justinmc
Copy link
Contributor

Passing this to team-web but if not feel free to change it.

@yjbanov yjbanov added P1 High-priority issues at the top of the work list triaged-web Triaged by Web platform team labels Sep 5, 2024
@nvbien2000
Copy link

I have the same problem with v3.24. But even from v3.22, it still suffers this issue when I open from Webclip.

@flutter-triage-bot flutter-triage-bot bot added the Bot is counting down the days until it unassigns the issue label Jan 9, 2025
@flutter-triage-bot
Copy link

This issue is assigned to @mdebbar but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

@userException
Copy link

Screen.Recording.2025-01-31.at.2.35.57.PM.mov

The issue is really bad in terms of mobile web safari browsers. Hard to explain to the end-user as well.

If you tap the "Done" button on the accessory view of the keyboard, the focus still remains in the textfield, as in you can see the blinking cursor. Now if I tap on the same textfield the resizeToAvoidBottomInset: true of my scaffold makes the bottom inset twise the size of the actual bottom inset

@flutter-triage-bot flutter-triage-bot bot removed the triaged-web Triaged by Web platform team label Mar 27, 2025
@flutter-triage-bot
Copy link

This issue was assigned to @mdebbar but has had no status updates in a long time. To remove any ambiguity about whether the issue is being worked on, the assignee was removed.

@flutter-triage-bot flutter-triage-bot bot removed the Bot is counting down the days until it unassigns the issue label Mar 27, 2025
@yjbanov yjbanov added the triaged-web Triaged by Web platform team label Apr 2, 2025
@pdax-manmai
Copy link

is there any updates on this? or any workaround solutions like using another version?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a: text input Entering text in a text field or keyboard related problems browser: safari-ios only manifests in Safari on iOS c: regression It was better in the past than it is now f: focus Focus traversal, gaining or losing focus found in release: 3.24 Found to occur in 3.24 framework flutter/packages/flutter repository. See also f: labels. fyi-text-input For the attention of Text Input team has reproducible steps The issue has been confirmed reproducible and is ready to work on P1 High-priority issues at the top of the work list platform-web Web applications specifically team-web Owned by Web platform team triaged-web Triaged by Web platform team
Projects
None yet
Development

No branches or pull requests

10 participants