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

afnx · 2021-08-17T14:23:53Z

Switching the TextFields which have obscureText set to true causes iOS Keyboard with AutoFill Passwords enabled to flicker. This also affects the widgets due to the change in the keyboard height. There is apparently no issue when AutoFill Passwords is disabled.

issue.mp4

Steps to Reproduce

Open Settings on iOS Simulator or an iPhone.
Go to Passwords.
Add a new password (if you haven't before).
Go to AutoFill Passwords.
Enable AutoFill Passwords.
Run the Flutter code below:

minimal code sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Test'),
      ),
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        hintText: "Obscure TextField 1",
                      ),
                    ),
                    TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        hintText: "Obscure TextField 2",
                      ),
                    ),
                    TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        hintText: "Obscure TextField 3",
                      ),
                    ),
                  ],
                ),
              ),
            ),
            ElevatedButton(
              onPressed: () {
                print('pressed');
              },
              child: Text('Button'),
            ),
          ],
        ),
      ),
    );
  }
}

Switch between TextFields.
Notice that the keyboard flickers and causes the button to flicker as well.

Details

I tested it on both Simulator and a real device. I got the same result.
Flutter version is Flutter 2.2.3 • channel stable.
The issue doesn't occur when I disable AutoFill Passwords.
No difference between the debug and release modes regarding to the issue.
This might be related: Keyboard on iOS flashes when switching between textfields when obscured and crash #64628.

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

LongCatIsLooong · 2021-08-18T05:40:14Z

I can confirm this doesn't happen with the same setup in a UIKit app. @afnx does it stop flickering if you put all 3 TextFields in an AutofillGroup?

afnx · 2021-08-18T08:23:52Z

@LongCatIsLooong, the issue still persists after using AutofillGroup.

TahaTesser · 2021-08-18T11:47:38Z

Hi @afnx
Thanks for filing the issue, looks similar to #80423, I can reproduce the issue on multiple channels

Used the following minimal code sample

complete minimal runnable code sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: AutofillGroup(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: "Obscure TextField 1",
              ),
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: "Obscure TextField 2",
              ),
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: "Obscure TextField 3",
              ),
            ),
          ],
        ),
      ),
    );
  }
}

`stable`	`master`
❌	❌

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on macOS 12.0 21A5304g darwin-x64, locale en-GB)
    • Flutter version 2.2.3 at /Users/tahatesser/Code/flutter_stable
    • Framework revision f4abaa0735 (7 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Code/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Temurin-11.0.12+7 (build 11.0.12+7)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • Xcode 13.0, Build version 13A5212g
    • CocoaPods version 1.10.1

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

[!] Android Studio (version 2020.3)
    • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7583922/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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

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

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios            • iOS 14.7.1
    • iPhone 12 (mobile)     • 7CC8A747-CD39-4C42-871C-2D1CCEAE2AE2 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64     • macOS 12.0 21A5304g darwin-x64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 92.0.4515.159

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.5.0-7.0.pre.130, on macOS 12.0 21A5304g darwin-x64, locale en-GB)
    • Flutter version 2.5.0-7.0.pre.130 at /Users/tahatesser/Code/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d83fba1a22 (5 hours ago), 2021-08-18 03:02:04 -0400
    • Engine revision a27da3eeb6
    • Dart version 2.15.0 (build 2.15.0-24.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/tahatesser/Code/SDK
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = /Users/tahatesser/Code/SDK
    • Java binary at: /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7583922/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 2020.3)
    • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7583922/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 11.0.10+0-b96-7281165)

[✓] Android Studio (version 2020.3)
    • Android Studio at /Users/tahatesser/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7583922/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 11.0.10+0-b96-7281165)

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

[✓] Connected device (4 available)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E            • ios            • iOS 14.7.1 18G82
    • iPhone 12 (mobile)     • 7CC8A747-CD39-4C42-871C-2D1CCEAE2AE2 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)        • macos                                • darwin-x64     • macOS 12.0 21A5304g darwin-x64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 92.0.4515.159

• No issues found!

✅: No Issue ❌: Issue reproduced

MahdiGharooni · 2021-11-16T12:32:57Z

Switching the TextFields which have obscureText set to true causes iOS Keyboard with AutoFill Passwords enabled to flicker. This also affects the widgets due to the change in the keyboard height. There is apparently no issue when AutoFill Passwords is disabled.

issue.mp4

Steps to Reproduce

Open Settings on iOS Simulator or an iPhone.

Go to Passwords.

Add a new password (if you haven't before).

Go to AutoFill Passwords.

Enable AutoFill Passwords.

Run the Flutter code below:

minimal code sample

Switch between TextFields.

Notice that the keyboard flickers and causes the button to flicker as well.

Details

I tested it on both Simulator and a real device. I got the same result.

Flutter version is Flutter 2.2.3 • channel stable.

The issue doesn't occur when I disable AutoFill Passwords.

No difference between the debug and release modes regarding to the issue.

This might be related: Keyboard on iOS flashes when switching between textfields when obscured and crash #64628.

I had the same error when using obsecure = true in browser of iPhone
so I wrote a custom textFormField called passwordTextFormField, you can see my article in this link:
https://github.com/MahdiGharooni/flutter_macos_obscureText

LinXunFeng · 2022-07-26T07:15:46Z

The problem is caused by iOS's autofill function, which can be resolved by turning it off

TextField(
  ...
  autofillHints: const <String>[AutofillHints.oneTimeCode],
  ...
)

derekpankaew · 2022-09-19T18:35:51Z

I'm having the same issue, where the screen flickers when the user moves between two fields. It occurs when the password field has obscureText set to true. It doesn't seem to matter whether autofill is enabled or not, or whether it's in an autofill group.

@MahdiGharooni - Did you say that disabling AutoFill Passwords helped? If so, can you describe how to do that? I've already tried:

Removing passwords from autofill group
autofillHints: null
enableSuggestions: false

I couldn't find any other way to disable AutoFill Passwords, would appreciate any help!

MahdiGharooni · 2022-09-20T05:02:57Z

First, upgrade your Flutter SDK or change the Flutter branch (master, stable) maybe it's fixed.
Second, I used a custom textFormField with obscure=false. You can find it in my GitHub profile: https://github.com/MahdiGharooni/flutter_macos_obscureText
if you use it please share your comments

derekpankaew · 2022-09-20T14:58:57Z

I upgraded the Flutter SDK already, it's not fixed yet. I'll give the custom textFormField a try - thank you!

CoolDude53 · 2023-02-06T18:21:05Z

@LongCatIsLooong bumping this

meowofficial · 2023-03-05T17:24:10Z

@LongCatIsLooong In my case keyboard flikers on iPad after text submission if autoCorrect set to false.
Setting autoCorrect to false also causes the error:

[LayoutConstraints] Unable to simultaneously satisfy constraints.
	Probably at least one of the constraints in the following list is one you don't want. 
	Try this: 
		(1) look at each constraint and try to figure out which you don't expect; 
		(2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x280983160 'assistantHeight' SystemInputAssistantView.height == 55   (active, names: SystemInputAssistantView:0x100d98570 )>",
    "<NSLayoutConstraint:0x2809fce10 'assistantView.bottom' SystemInputAssistantView.bottom == _UIKBCompatInputView:0x100dc3710.top   (active, names: SystemInputAssistantView:0x100d98570 )>",
    "<NSLayoutConstraint:0x2809fc370 'assistantView.top' V:|-(0)-[SystemInputAssistantView]   (active, names: SystemInputAssistantView:0x100d98570, '|':UIInputSetHostView:0x12c1ce730 )>",
    "<NSLayoutConstraint:0x28098cf50 'inputView.top' V:|-(0)-[_UIKBCompatInputView:0x100dc3710]   (active, names: '|':UIInputSetHostView:0x12c1ce730 )>"
)


Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x2809fce10 'assistantView.bottom' SystemInputAssistantView.bottom == _UIKBCompatInputView:0x100dc3710.top   (active, names: SystemInputAssistantView:0x100d98570 )>


Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.```

gonzalogauto · 2023-04-20T20:48:17Z

Any updates on this? In my case if I set autocorrect: false the flickering goes away and I can still using obscureText + autofillHints

dodatw · 2023-05-14T07:23:37Z

This issue can reproduce on flutter 3.7.12, Is there any solution ?

lukeurban · 2023-09-06T11:36:02Z

Exist on channel stable, 3.13.2 as well.

mittenimraum · 2023-09-19T13:02:00Z

For me it started to appear with iOS 17 and having autofillHints set e.g.: [AutofillHints.username]. It is still present in the latest Beta Flutter 3.15.0-15.1.pre. When removing autofillHints the flickering disappears, which leads me to believe that the issue is connected to the autofill hints bar above the keyboard.

aarcoraci · 2023-09-20T13:43:55Z

It has started to happen to me as well since iOS17

liplum · 2023-09-21T19:36:49Z

I can reproduce it on iOS 17.

As @LinXunFeng mentioned above, the code snippet could work. However it just breaks the password autofill feature on iOS.

TextField(
  // now the keyboard doesn't recognize the text field as a password field.
  autofillHints: const <String>[AutofillHints.oneTimeCode],
)

aarcoraci · 2023-09-25T13:21:40Z

seems to be related to:
#134723

In which case I see someone working on it 😄

baptiste-veyrard · 2024-01-17T22:04:54Z

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.
I try to add "autocorrect: false" but it did not work.

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.

AdamYogan · 2024-06-25T21:04:35Z

Problem still exists...

Flutter 3.22.2

I have an authentication screen with username and password form fields. When I switch between fields, the keyboard size changes momentarily. The extra top space for password selection hides for a few milliseconds and then reverts to its previous state. I use an Expanded widget with an app logo, so everything resizes without any animation, which gives the app an unpleasant and unpolished feeling.

When I switch off autofillHints and obscureText, iOS doesn't identify those fields as username/password and doesn't show the keyboard's extra top space for password selection.

But this is not a solution... We need proper behaviour.

anhquangtech · 2024-06-27T04:09:27Z

Temporary solution (but it is not the best solution, problem still in flutter version 3.22.2).
I turned off autocorrect, autofillHints to use obscure text. This is my code:

obscureText: true or false, // you can use obscureText
autofillHints: const <String>[AutofillHints.oneTimeCode],
autocorrect: false,

Note: this is a temporary solution. We need proper behavior.

AdamYogan · 2024-07-17T19:58:24Z

Assignees: No one assigned

Guys, it's a joke. Is Flutter dead? Should we migrate to something else?

AdamTechAcc · 2024-09-29T11:59:40Z

Google, please do something with that issue.

kamami · 2024-11-06T16:13:18Z

Any update?

AdamTechAcc · 2025-01-19T23:02:56Z

Any news? Bug is really ugly...

AdamTechAcc · 2025-02-09T15:37:30Z

I really like flutter, but this is not good... Should we switch to flock or other technology?

JHeisecke · 2025-05-05T15:22:44Z

for future devs coming here. This happens natively using SwiftUI, so it's not a flutter issue.

TahaTesser added the in triage Presently being triaged by the triage team label Aug 18, 2021

LongCatIsLooong mentioned this issue Aug 31, 2021

Glitch when switching between text fields with autofillHints and autocorrect #89022

Closed

LongCatIsLooong added the P2 Important issues not at the top of the work list label Aug 31, 2021

darshankawar mentioned this issue Dec 22, 2022

Keyboard on iOS flashes when switching between obscured and non-obscured TextFields #117494

Closed

flutter-triage-bot bot added multiteam-retriage-candidate team-ios Owned by iOS platform team triaged-ios Triaged by iOS platform team labels Jul 8, 2023

huycozy mentioned this issue Mar 6, 2024

Screen jumps when switching to password TextField on iOS #144638

Closed

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

darshankawar mentioned this issue Apr 19, 2024

Android: Using secure keyboard and obscureText: true, the screen scrolls and flashes while switching between input fields. #146973

Open

DiegoAndai mentioned this issue Oct 2, 2024

[material-ui][TextField] Screen flickering when typing in Chrome mobile mui/material-ui#43808

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

afnx commented Aug 17, 2021 •

edited

Loading

LongCatIsLooong commented Aug 18, 2021

afnx commented Aug 18, 2021

TahaTesser commented Aug 18, 2021

MahdiGharooni commented Nov 16, 2021

Steps to Reproduce

Details

LinXunFeng commented Jul 26, 2022

derekpankaew commented Sep 19, 2022

MahdiGharooni commented Sep 20, 2022

derekpankaew commented Sep 20, 2022

CoolDude53 commented Feb 6, 2023

meowofficial commented Mar 5, 2023 •

edited

Loading

gonzalogauto commented Apr 20, 2023

dodatw commented May 14, 2023

lukeurban commented Sep 6, 2023

mittenimraum commented Sep 19, 2023

aarcoraci commented Sep 20, 2023

liplum commented Sep 21, 2023 •

edited

Loading

aarcoraci commented Sep 25, 2023

baptiste-veyrard commented Jan 17, 2024

AdamYogan commented Jun 25, 2024 •

edited

Loading

anhquangtech commented Jun 27, 2024

AdamYogan commented Jul 17, 2024

AdamTechAcc commented Sep 29, 2024

kamami commented Nov 6, 2024

AdamTechAcc commented Jan 19, 2025

AdamTechAcc commented Feb 9, 2025

JHeisecke commented May 5, 2025

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

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

Comments

afnx commented Aug 17, 2021 • edited Loading

Steps to Reproduce

Details

LongCatIsLooong commented Aug 18, 2021

afnx commented Aug 18, 2021

TahaTesser commented Aug 18, 2021

MahdiGharooni commented Nov 16, 2021

Steps to Reproduce

Details

LinXunFeng commented Jul 26, 2022

derekpankaew commented Sep 19, 2022

MahdiGharooni commented Sep 20, 2022

derekpankaew commented Sep 20, 2022

CoolDude53 commented Feb 6, 2023

meowofficial commented Mar 5, 2023 • edited Loading

gonzalogauto commented Apr 20, 2023

dodatw commented May 14, 2023

lukeurban commented Sep 6, 2023

mittenimraum commented Sep 19, 2023

aarcoraci commented Sep 20, 2023

liplum commented Sep 21, 2023 • edited Loading

aarcoraci commented Sep 25, 2023

baptiste-veyrard commented Jan 17, 2024

AdamYogan commented Jun 25, 2024 • edited Loading

anhquangtech commented Jun 27, 2024

AdamYogan commented Jul 17, 2024

AdamTechAcc commented Sep 29, 2024

kamami commented Nov 6, 2024

AdamTechAcc commented Jan 19, 2025

AdamTechAcc commented Feb 9, 2025

JHeisecke commented May 5, 2025

afnx commented Aug 17, 2021 •

edited

Loading

meowofficial commented Mar 5, 2023 •

edited

Loading

liplum commented Sep 21, 2023 •

edited

Loading

AdamYogan commented Jun 25, 2024 •

edited

Loading