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

afnx commented 3 years ago

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.

https://user-images.githubusercontent.com/12843244/129736966-5efed6d0-0298-4294-af8e-04f4939f917f.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: #64628.

LongCatIsLooong commented 3 years ago

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 commented 3 years ago

@LongCatIsLooong, the issue still persists after using AutofillGroup.

TahaTesser commented 3 years ago

Hi @afnx Thanks for filing the issue, looks similar to https://github.com/flutter/flutter/issues/80423, I can reproduce the issue on multiple channels

Used the following minimal code sample

complete minimal runnable code sample

```dart 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: [ 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

```console [✓] 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. ``` ```console [✓] 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 commented 2 years ago

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 commented 2 years ago

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

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

derekpankaew commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

CoolDude53 commented 1 year ago

@LongCatIsLooong bumping this

meowofficial commented 1 year ago

@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 commented 1 year ago

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

dodatw commented 1 year ago

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

lukeurban commented 1 year ago

Exist on channel stable, 3.13.2 as well.

mittenimraum commented 11 months ago

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 commented 11 months ago

It has started to happen to me as well since iOS17

liplum commented 11 months ago

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 commented 11 months ago

seems to be related to: https://github.com/flutter/flutter/issues/134723

In which case I see someone working on it 😄

baptiste-veyrard commented 7 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 1 month ago

Assignees: No one assigned

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

flutter / flutter