Save password prompt dismiss is pushing UI up and down

Steps to Reproduce

Launch a flutter application with a login form (email/pw).
Fill out the form, submit and navigate to another page.
On iOS (I observed this on iOS 15+), dismiss the prompt.
** On the machine I ran, it currently has flutter 2 however, when upgraded to flutter 3, the same behavior is present. And appears only to affect iOS.

Expected results: The prompt should dismiss from the widget leaving the underlying page unmodified.

Actual results: After being dismissed, the contents on the widget is being pushed up and down.

Code sample

Simplified widgets to show the issue:

import 'package:exampleapp/widgets/simple_page.dart';
import 'package:flutter/material.dart';

class AutoFillPwWork extends StatefulWidget {
  const AutoFillPwWork({Key? key}) : super(key: key);

  @override
  State<AutoFillPwWork> createState() => _AutoFillPwWorkState();
}

class _AutoFillPwWorkState extends State<AutoFillPwWork> {
  final TextEditingController email = TextEditingController();
  final TextEditingController password = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Save PW iOS'),
        ),
        body: ListView(
          children: <Widget>[
            const Text('Login'),
            AutofillGroup(
              child: Column(
                children: <Widget>[
                  TextField(
                    controller: email,
                    autofillHints: const <String>[AutofillHints.email],
                  ),
                  TextField(
                    controller: password,
                    autofillHints: const <String>[AutofillHints.password],
                  ),
                ],
              ),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const SimplePage()),
                );
              },
              child: const Text('Push SimplePage'),
            ),
          ],
        ));
  }
}

import 'package:flutter/material.dart';

class SimplePage extends StatelessWidget {
  const SimplePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      appBar: AppBar(
        title: const Text('Simple Page'),
      ),
      body: Center(
        child: Container(
          color: Colors.blue,
          child: const Text('Simple Page'),
        ),
      ),
    );
  }
}

Details

Flutter (Channel unknown, 2.10.1, on macOS 11.6.8 20G730 darwin-x64, locale en-US) • Flutter version 2.10.1 at /Users/user/Development/flutter • Upstream repository unknown • Framework revision db747aa (8 months ago), 2022-02-09 13:57:35 -0600 • Engine revision ab46186 • Dart version 2.16.1 • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
• Android SDK at /Users/user/Library/Android/sdk
• Platform android-31, build-tools 31.0.0
• Java binary at: /Applications/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.2.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.3

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

[✓] Android Studio (version 2020.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
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

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

[✓] Connected device (2 available)
• iPhone (mobile) • ios • iOS 15.7 19H12
• Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.125

[✓] HTTP Host Availability
• All required HTTP hosts are available

save_pw_issue.MP4

@rsp-84

Thanks for the report @rsp-84
I think there's an animation taking place when after entering password and you directly tap on push simplePage button, with virtual keyboard still open which might be impacting the UI as you described.

Can you try, after entering password, tap on done button from virtual keyboard and then tap on push simplePage and see if you still get same UI behavior on next page or not ?

@darshankawar

@darshankawar – When pressing done the issue still seems to persist.

In this simplified example, I have removed almost everything to display the issue with the base Flutter elements. When pressing done to simulate submitting a login form and then proceeding to the next page, the issue still occurs. This would probably be the most common user flow: fill out the login form, submit it, and proceed directly to the logged-in page.

Here is another video using the Done button. The only modification to the example would be to add an onSubmitted value to the password text field.

TextField(
                    controller: password,
                    autofillHints: const <String>[AutofillHints.password],
                    onSubmitted: (_) => Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => const SimplePage()),
                    ),
                  ),
                  ```

save_pw_issue_2.MP4

@rsp-84

@rsp-84
I am unable to replicate it on iPhone 6s running on 15.3.1 using latest master version.

3. ** On the machine I ran, it currently has flutter 2 however, when upgraded to flutter 3, the same behavior is present. And appears only to affect iOS.

Can you provide updated flutter doctor -v along with device details and also try on latest master to see if same behavior is present ?

@darshankawar

@darshankawar –

[✓] Flutter (Channel unknown, 3.3.0, on macOS 11.6.8 20G730 darwin-x64, locale en-US)
    • Flutter version 3.3.0 at /Users/user/Development/flutter
    • Upstream repository unknown
    • Framework revision ffccd96b62 (4 weeks ago), 2022-08-29 17:28:57 -0700
    • Engine revision 5e9e0e0aa8
    • Dart version 2.18.0
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/user/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/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.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2020.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
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

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

[✓] Connected device (3 available)
    • iPhone (mobile)  • ios            • iOS 15.7 19H12
    • macOS (desktop)        • macos                     • darwin-x64     • macOS 11.6.8 20G730 darwin-x64
    • Chrome (web)           • chrome                    • web-javascript • Google Chrome 105.0.5195.125

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Device: It is an iPhone X on iOS 15.7

@rsp-84

Thanks for the update @rsp-84. For some reason, I am unable to see the save password option on next screen as shown below even though I have autofill passwords and icloud keychain settings enabled.

RPReplay-Final1664517627.MP4

One of my colleagues is also seeing same behavior on different iOS device:

RPReplay_Final1664516765.MP4

I am going ahead and keeping this issue open based on the report.

@LongCatIsLooong

/cc @LongCatIsLooong

@TahaTesser

@TahaTesser Hello! Could you please provide more explanation about issues with third-parties? I think now if anyone wants to fix this, they can't be sure that it won't break something again.

@cka29

@cka29 workaround

import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

class ScaffoldWithKeyboardVisibilityBuilder extends StatelessWidget {
  const ScaffoldWithKeyboardVisibilityBuilder({
    super.key,
    required this.body,
    this.appBar,
    this.backgroundColor,
  });
  final Widget body;
  final PreferredSizeWidget? appBar;
  final Color? backgroundColor;

  @override
  Widget build(BuildContext context) {
    return KeyboardVisibilityBuilder(builder: (context, isKeyboardVisible) {
      return Scaffold(
        // Fi for UI glitch issue - https://github.com/flutter/flutter/issues/112281
        resizeToAvoidBottomInset: isKeyboardVisible,
        appBar: appBar,
        body: body,
        backgroundColor: backgroundColor,
      );
    });
  }
}

[Engine][iOS] Cancel animation when recieved `UIKeyboardWillHideNotif…

It's been a few days and it hasn't been reverted, probably OK.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

[Engine][iOS] Cancel animation when recieved `UIKeyboardWillHideNotif…

Navigation Menu

Repository navigation

Save password prompt dismiss is pushing UI up and down #112281

Steps to Reproduce

53 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Save password prompt dismiss is pushing UI up and down #112281

Description

Steps to Reproduce

Activity

darshankawar commented on Sep 26, 2022

rsp-84 commented on Sep 26, 2022

rsp-84 commented on Sep 26, 2022

darshankawar commented on Sep 27, 2022

rsp-84 commented on Sep 29, 2022

darshankawar commented on Sep 30, 2022

darshankawar commented on Sep 30, 2022

53 remaining items

Xoka74 commented on Apr 16, 2024

cka29 commented on Jan 13, 2025

Den-creator commented on Jan 27, 2025

koji-1009 commented on Apr 7, 2025

github-actions commented on Apr 21, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions