Password bar in the keyboard is flashing when using `TextField` with `AutofillHints.password` on iOS 17 #134723

nilsreichardt · 2023-09-14T11:38:08Z

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Use an iOS 17 device
Add a TextField with AutofillHints.password
Start typing

Expected results

No flashing.

Actual results

The password bar of the keyboard flashes but sometimes also the TextField (see video).

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: TextField(
            autofillHints: [AutofillHints.password],
          ),
        ),
      ),
    ),
  );
}

https://github.com/nilsreichardt/flutter-ios17-textfield-bug

Screenshots or Video

RPReplay_Final1694690660.MP4

Logs

2023-09-14 13:44:46.470430+0200 Runner[1447:88815] Metal API Validation Enabled
2023-09-14 13:44:46.567930+0200 Runner[1447:88815] [VERBOSE-2:FlutterDarwinContextMetalImpeller.mm(42)] Using the Impeller rendering backend.
2023-09-14 13:44:46.680337+0200 Runner[1447:89203] flutter: The Dart VM service is listening on http://127.0.0.1:62669/HKQ_5uMac8k=/

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.4, on macOS 13.5.2 22G91 darwin-arm64 (Rosetta), locale en-DE)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[!] Android Studio (version unknown)
    ✗ Unable to determine Android Studio version.
    ✗ Unable to find bundled Java version.
[✓] Android Studio (version 2022.3)
[✓] IntelliJ IDEA Community Edition (version 2023.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.2.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.2.3)
[✓] VS Code (version 1.82.1)
[✓] VS Code (version 1.82.0-insider)
[✓] Connected device (2 available)
[✓] Network resources

Additional context

Used iPhone 13 with iOS 17.0
Appears with Flutter v3.13.4 (latest stable version) and Flutter v3.14.0-14.0.pre.290 (latest master version)

The text was updated successfully, but these errors were encountered:

danagbemava-nc · 2023-09-14T13:07:09Z

Thanks for the report @nilsreichardt. I am unable to test this at the moment but this should be investigated nonetheless.

Fyi @stuartmorgan

SanketRSalve · 2023-09-14T18:40:31Z

https://api.flutter.dev/flutter/material/TextField/autofillHints.html - Have you tried this? to support autofills in iOS.

nilsreichardt · 2023-09-14T20:11:04Z

https://api.flutter.dev/flutter/material/TextField/autofillHints.html - Have you tried this? to support autofills in iOS.

Thanks for your comment. However, I'm not looking to implement autofill. My issue that the keyboard flashes when typing and using autofills on iOS 17. It affects all TextFields in all Flutter apps.

huycozy · 2023-09-15T05:04:41Z

I can reproduce the issue on iPhone 14 Pro, iOS 17.0. It doesn't appear on iPhone 7, iOS 15.7.2.

But I noticed the Password bar flashes only, not whole the keyboard (on the OP demo video and my test)

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.13.4, on macOS 13.5 22G74 darwin-x64, locale en-VN)
    • Flutter version 3.13.4 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 367f9ea16b (31 hours ago), 2023-09-12 23:27:53 -0500
    • Engine revision 9064459a8b
    • Dart version 3.1.2
    • DevTools version 2.25.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 32.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.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode15RC.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2022.2)
    • 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
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (5 available)
    • RMX2001 (mobile)       • EUYTFEUSQSRGDA6D                         • android-arm64  • Android 11 (API 30)
    • iPhone (mobile)        • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.7.2 19H218
    • iPhone 14 Pro (mobile) • 3BD60F46-FB95-41A0-A179-8AA3F637DA4E     • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)        • macos                                    • darwin-x64     • macOS 13.5 22G74 darwin-x64
    • Chrome (web)           • chrome                                   • web-javascript • Google Chrome 117.0.5938.62

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

• No issues found!

[!] Flutter (Channel master, 3.14.0-14.0.pre.307, on macOS 13.5 22G74 darwin-x64, locale en-VN)
    • Flutter version 3.14.0-14.0.pre.307 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 1e4a1be681 (60 minutes ago), 2023-09-14 19:10:37 -0700
    • Engine revision 45bc4307cd
    • Dart version 3.2.0 (build 3.2.0-162.0.dev)
    • DevTools version 2.28.0-dev.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 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 32.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.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2022.2)
    • 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
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (4 available)
    • Pixel 7 (mobile) • 2B171FDH20084L                           • android-arm64  • Android 13 (API 33)
    • iPhone (mobile)  • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.7.2 19H218
    • macOS (desktop)  • macos                                    • darwin-x64     • macOS 13.5 22G74 darwin-x64
    • Chrome (web)     • chrome                                   • web-javascript • Google Chrome 117.0.5938.62

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

! Doctor found issues in 1 category.

stuartmorgan · 2023-09-15T10:36:05Z

It looks like the keyboard is rapidly transitioning in and out of having the password bar, changing its height very briefly as a result. We should add logging around the relevant parts of the text input protocol to see what updates we're sending the OS.

/cc @hellohuanlin

LongCatIsLooong · 2023-09-28T21:01:03Z

I can't reproduce this on iOS 17 simulator. Is this only reproducible on real devices?

dmacinator · 2023-09-29T00:09:26Z

I can't reproduce this on iOS 17 simulator. Is this only reproducible on real devices?

My problem with using the simulator, is the keyboard does not show up when trying to test this. Try on a real device, either set obscure text to true. Here is a gist that recreates the issue well on my iPhone 12. https://gist.github.com/dmacinator/cbe57ec395ab2e92ba698886374e8f28 The autofill also flickers when the suffix icon is pressed, when changing the widget state. There also seems to be a deal of lag too when typing fast, which causes the textfield to stop registering and the autofill disappears until flutter is able to catch up.

Also I was able to recreate on simulator. Go to I/O make sure toggle device keyboard is on. Then go into passwords in settings and make sure autofill password is on. If you go into safari or somewhere you can save a password to device [like signing into a gmail]. Now, if you use the widget I provided in the gist, when the keyboard is up (CMD + K) and the Passwords autofill shows up, click on the keyboard and the password autofill will disappear at random. I have noticed its not as fast to flicker on the simulator.

scott-the-brewer · 2023-10-24T23:14:35Z

Have you been able to reproduce this @LongCatIsLooong?

mllustosa · 2023-10-26T13:56:32Z

For reference, the same is happening with react-native as well, so I'm not sure it is a flutter issue.

dmacinator · 2023-10-27T17:02:00Z

For reference, the same is happening with react-native as well, so I'm not sure it is a flutter issue.

It's interesting, because using flutter 3.16.0-0.3.pre (beta) the issue is non-existent on iOS 17.0.3 iPhone 12 Pro. (On 3.16 -->) When switching between 2 TextFormField's each with obscured text set to true there is weird behavior where the scaffold jumps down then back up and the password autofill bar flickers at the same time. But on this version compared to stable the flickering caused when typing is gone.

Mik77o · 2023-11-24T12:01:34Z

We encounter the same issue: flutter ^3.13.9, iOS 17.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-11-24.at.12.45.21.mp4

seanodonnell-udisc · 2023-11-27T21:31:30Z

fwiw, I have the same issue in my app and I am using native SwiftUI

hellohuanlin · 2023-11-28T22:43:31Z

@seanodonnell-udisc could you post a recording? I have not seen such behavior in SwiftUI.

ttoffalori · 2023-11-30T08:49:24Z

For reference, the same is happening with react-native as well, so I'm not sure it is a flutter issue.

It's interesting, because using flutter 3.16.0-0.3.pre (beta) the issue is non-existent on iOS 17.0.3 iPhone 12 Pro. (On 3.16 -->) When switching between 2 TextFormField's each with obscured text set to true there is weird behavior where the scaffold jumps down then back up and the password autofill bar flickers at the same time. But on this version compared to stable the flickering caused when typing is gone. (For me this bug is essentially fixed as of Flutter 3.16, no complaints).

I just updated to Flutter 3.16 because of this, but the issue is still there.

seanodonnell-udisc · 2023-12-06T16:45:20Z

@seanodonnell-udisc could you post a recording? I have not seen such behavior in SwiftUI.

Sorry for the delay
Seems to happen with our usages of TextField, with a UITextContentType of .username or .password (i.e. anything that will look at Keychain for saved credentials). The flashing does not happen when using SecureField.

flashing-keychain.mp4

sparrow001 · 2023-12-10T02:02:47Z

Still reproducible with Flutter 3.16 and TextFormField, using iOS 17

baptiste-veyrard · 2024-01-17T22:03:31Z

Hi,

I got the same issue.
I am using FlutterFlow to build an app, so it is based on flutter and I have access to the flutter code.

I did several tests, and as soon as the field is considered as a password, the quicktype bar display the "password" option and it starts to flash/flicker.
Taking a classic textField, as soon as adding 'obscureText = true' the bug is triggered.

Did you find any solution?

I use Flutter 3.13.2.
I build the archive via Xcode.
I tested on several Iphone device simulators as well as on real devices, same results everywhere.

ammar-madni · 2024-01-21T23:38:18Z

This seems to be an issue with iOS 17 as it happens on react native apps too. See facebook/react-native#39411

Sagarpoudel122 · 2024-01-25T13:41:11Z

Hi,

Platform: Web
Browser: Safari
Flutter: 3.16.8

For me, It's happening when setState or any rebuilding is used inside onFocusChange listener applied on TextFormField, Removing setState works well.

Any solution?

flutter-triage-bot · 2024-04-03T01:43:14Z

This issue is assigned to @LongCatIsLooong 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!

Shweta-Vitality · 2024-04-05T06:45:47Z

We are facing same issue in iOS 17 only. Also, it's only in real iOS device and release build, because we tested in debug mode and it's working fine but when we release build password bar is flickering.

sjthn · 2024-04-09T07:46:17Z

We are facing the same issue. We use obscureText. Tried with autofillHints as null, but stil facing the issue.Able to reproduce this in simulator, ios 17. Flutter version: 3.13.4.

allenwyj · 2024-05-14T06:00:24Z

Same issue here and also, my app may crash randomly

danagbemava-nc added the in triage Presently being triaged by the triage team label Sep 14, 2023

huycozy added has reproducible steps The issue has been confirmed reproducible and is ready to work on found in release: 3.13 Found to occur in 3.13 found in release: 3.14 Found to occur in 3.14 labels Sep 15, 2023

nilsreichardt changed the title ~~Keyboard is flashing when using TextField with AutofillHints.password on iOS 17~~ Password bar in the keyboard is flashing when using TextField with AutofillHints.password on iOS 17 Sep 15, 2023

Renzo-Olivares assigned LongCatIsLooong Sep 15, 2023

Renzo-Olivares added team-design Owned by Design Languages team triaged-design Triaged by Design Languages team P2 Important issues not at the top of the work list labels Sep 15, 2023

flutter-triage-bot bot removed team-design Owned by Design Languages team triaged-design Triaged by Design Languages team team-ios Owned by iOS platform team labels Sep 15, 2023

This comment was marked as resolved.

Sign in to view

aarcoraci mentioned this issue Sep 25, 2023

iOS Keyboard flickers when switching the TextFields which have obscureText set to true #88354

Open

This comment was marked as duplicate.

Sign in to view

danagbemava-nc mentioned this issue Dec 28, 2023

The password keyboard will flash in flutter 3.16.5 ios17.1.2 #140693

Closed

ChrGrb mentioned this issue Jan 18, 2024

Fix footer jumping when recommendation bar flashes drogel/keyboard_attachable#33

Closed

xydian mentioned this issue Jan 25, 2024

Keyboard Flickering on TextInput with secureTextEntry facebook/react-native#39411

Closed

flutter-triage-bot bot added the ⏳ Bot is counting down the days until it unassigns the issue label Apr 3, 2024

Adam3371 mentioned this issue Jun 3, 2024

Solve Keyboard Password Bar Flickering for iOS 17.x corbado/javascript#380

Open

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Password bar in the keyboard is flashing when using `TextField` with `AutofillHints.password` on iOS 17 #134723

Password bar in the keyboard is flashing when using `TextField` with `AutofillHints.password` on iOS 17 #134723

nilsreichardt commented Sep 14, 2023 •

edited

danagbemava-nc commented Sep 14, 2023

SanketRSalve commented Sep 14, 2023

nilsreichardt commented Sep 14, 2023

huycozy commented Sep 15, 2023

stuartmorgan commented Sep 15, 2023

This comment was marked as resolved.

LongCatIsLooong commented Sep 28, 2023

dmacinator commented Sep 29, 2023

scott-the-brewer commented Oct 24, 2023 •

edited

mllustosa commented Oct 26, 2023

dmacinator commented Oct 27, 2023 •

edited

Mik77o commented Nov 24, 2023

seanodonnell-udisc commented Nov 27, 2023

hellohuanlin commented Nov 28, 2023

ttoffalori commented Nov 30, 2023

This comment was marked as duplicate.

This comment was marked as duplicate.

seanodonnell-udisc commented Dec 6, 2023

sparrow001 commented Dec 10, 2023 •

edited

baptiste-veyrard commented Jan 17, 2024

ammar-madni commented Jan 21, 2024

Sagarpoudel122 commented Jan 25, 2024

flutter-triage-bot bot commented Apr 3, 2024

Shweta-Vitality commented Apr 5, 2024

sjthn commented Apr 9, 2024

allenwyj commented May 14, 2024

Password bar in the keyboard is flashing when using TextField with AutofillHints.password on iOS 17 #134723

Password bar in the keyboard is flashing when using TextField with AutofillHints.password on iOS 17 #134723

Comments

nilsreichardt commented Sep 14, 2023 • edited

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Additional context

danagbemava-nc commented Sep 14, 2023

SanketRSalve commented Sep 14, 2023

nilsreichardt commented Sep 14, 2023

huycozy commented Sep 15, 2023

stuartmorgan commented Sep 15, 2023

This comment was marked as resolved.

LongCatIsLooong commented Sep 28, 2023

dmacinator commented Sep 29, 2023

scott-the-brewer commented Oct 24, 2023 • edited

mllustosa commented Oct 26, 2023

dmacinator commented Oct 27, 2023 • edited

Mik77o commented Nov 24, 2023

seanodonnell-udisc commented Nov 27, 2023

hellohuanlin commented Nov 28, 2023

ttoffalori commented Nov 30, 2023

This comment was marked as duplicate.

This comment was marked as duplicate.

seanodonnell-udisc commented Dec 6, 2023

sparrow001 commented Dec 10, 2023 • edited

baptiste-veyrard commented Jan 17, 2024

ammar-madni commented Jan 21, 2024

Sagarpoudel122 commented Jan 25, 2024

flutter-triage-bot bot commented Apr 3, 2024

Shweta-Vitality commented Apr 5, 2024

sjthn commented Apr 9, 2024

allenwyj commented May 14, 2024

Password bar in the keyboard is flashing when using `TextField` with `AutofillHints.password` on iOS 17 #134723

Password bar in the keyboard is flashing when using `TextField` with `AutofillHints.password` on iOS 17 #134723

nilsreichardt commented Sep 14, 2023 •

edited

scott-the-brewer commented Oct 24, 2023 •

edited

dmacinator commented Oct 27, 2023 •

edited

sparrow001 commented Dec 10, 2023 •

edited