[mobile_web][iOS] TextField and other Column content is pushed beyond view on TextField re-entry after "Done" shortcut is tapped

[danielkerwin]

Steps to Reproduce

Minimal code to reproduce is here: https://www.dartpad.dev/?id=8d636c9ce2e71951d0354b74d5f75b47

1. Execute code in iOS mobile browser (Safari or Chrome)
2. Tap into TextField; keyboard opens
3. Select "Done" action above the keyboard; keyboard closes
4. Tap into TextField; keyboard opens, TextField is now padded beyond visible area and is no longer aligned in the Column at the end which should be directly above the keyboard.

Expected results: After selecting "Done" and re-entering TextField, expect that TextField remains directly above Keyboard when Column MainAxisAlignment is sent to end.

Actual results: The TextField is padded beyond visible area by an amount approximately equivalent to the keyboard - any content above the TextField is also obscured from vision and use.

[✓] Flutter (Channel stable, 2.10.2, on macOS 12.0 21A344 darwin-arm, locale en-AU)
    • Flutter version 2.10.2 at /Users/danielkerwin/Sites/flutter-sdk
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 097d3313d8 (4 days ago), 2022-02-18 19:33:08 -0600
    • Engine revision a83ed0e5e3
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/danielkerwin/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • 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.2

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

[✓] Android Studio (version 2021.1)
    • 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.11+0-b60-7772763)

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

[✓] Connected device (3 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554                        • android-arm64  • Android 12 (API 31) (emulator)
    • iPhone 13 (mobile)          • 7B398F5B-9DB5-4385-9A5A-74529963C47A • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    • Chrome (web)                • chrome                               • web-javascript • Google Chrome 98.0.4758.102

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

Screenshots from iOS Mobile Web:

1 -- TextField is aligned correctly at MainAxisAlignment.end

2 - User enters TextField, Keyboard opened; User taps "Done"

3 - User re-enters TextField after tapping "Done"; large block of padding added between keyboard and TextField

Recording of issue reproduced on iOS Simulator Note: issue is slightly different in iOS Simulator but is consistent in that on "Done" tap, the TextField is padded above the keyboard by a given amount, but in iOS Simulator, the keyboard does not remain closed (it starts to close, then opens again immediately)

https://user-images.githubusercontent.com/13343761/155266092-79fe2834-2e71-44f3-b080-1c884978f19a.mov

[danagbemava-nc]

Hi @danielkerwin, thanks for reporting this. I'm attempting to reproduce. Can you check if the video below captures your issue? I tested on iPhone XS

video

https://user-images.githubusercontent.com/88313112/155303326-f3bd1fd9-add5-4b7b-b1bc-33e34026ecfc.MP4

[danielkerwin]

@danagbemava-nc no problem - yes, that captures the issue exactly

[danagbemava-nc]

Thanks for the confirmation.

Reproducible on stable and master.

Video reproducing the issue can be found in https://github.com/flutter/flutter/issues/98961#issuecomment-1048649286.

complete code sample

```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('TextField Issue'), ), body: SafeArea( child: Column( mainAxisAlignment: MainAxisAlignment.end, children: [ Container( margin: const EdgeInsets.only(top: 10), padding: const EdgeInsets.only( left: 20, right: 20, bottom: 15, ), child: const TextField( decoration: InputDecoration( labelText: 'Tap me on Mobile Web then tap "Done" shortcut', ), ), ), ], ), ), ), ); } } ```

flutter doctor -v

```console [✓] Flutter (Channel stable, 2.10.2, on macOS 12.2 21D49 darwin-arm, locale en-GB) • Flutter version 2.10.2 at /Users/nexus/dev/sdks/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 097d3313d8 (6 days ago), 2022-02-18 19:33:08 -0600 • Engine revision a83ed0e5e3 • 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/nexus/Library/Android/sdk • Platform android-32, 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.11+0-b60-7772763) • 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.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.1) • 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.11+0-b60-7772763) [☠] IntelliJ IDEA Community Edition (the doctor check crashed) ✗ Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know about this issue at https://github.com/flutter/flutter/issues. ✗ FormatException: Unexpected extension byte (at offset 5) • #0 _Utf8Decoder.convertSingle (dart:convert-patch/convert_patch.dart:1789:7) #1 Utf8Decoder.convert (dart:convert/utf.dart:351:42) #2 InputStream.readString (package:archive/src/util/input_stream.dart:207:30) #3 new ZipDirectory.read (package:archive/src/zip/zip_directory.dart:40:30) #4 ZipDecoder.decodeBuffer (package:archive/src/zip_decoder.dart:19:30) #5 ZipDecoder.decodeBytes (package:archive/src/zip_decoder.dart:14:12) #6 IntelliJPlugins._findPluginXml (package:flutter_tools/src/intellij/intellij.dart:130:44) #7 IntelliJPlugins._readPackageVersion (package:flutter_tools/src/intellij/intellij.dart:141:40) #8 IntelliJPlugins.validatePackage (package:flutter_tools/src/intellij/intellij.dart:63:35) #9 IntelliJValidator.validate (package:flutter_tools/src/intellij/intellij_validator.dart:103:15) #10 asyncGuard. (package:flutter_tools/src/base/async_guard.dart:111:32) #11 asyncGuard. (package:flutter_tools/src/base/async_guard.dart:109:18) #12 _rootRun (dart:async/zone.dart:1426:13) #13 _CustomZone.run (dart:async/zone.dart:1328:19) #14 _runZoned (dart:async/zone.dart:1861:10) #15 runZonedGuarded (dart:async/zone.dart:1849:12) #16 runZoned (dart:async/zone.dart:1780:12) #17 asyncGuard (package:flutter_tools/src/base/async_guard.dart:109:3) #18 Doctor.startValidatorTasks (package:flutter_tools/src/doctor.dart:205:9) #19 Doctor.diagnose (package:flutter_tools/src/doctor.dart:309:47) #20 DoctorCommand.runCommand (package:flutter_tools/src/commands/doctor.dart:50:48) #21 FlutterCommand.verifyThenRunCommand (package:flutter_tools/src/runner/flutter_command.dart:1320:12) #22 FlutterCommand.run. (package:flutter_tools/src/runner/flutter_command.dart:1161:27) #23 AppContext.run. (package:flutter_tools/src/base/context.dart:150:19) #24 CommandRunner.runCommand (package:args/command_runner.dart:209:13) #25 FlutterCommandRunner.runCommand. (package:flutter_tools/src/runner/flutter_command_runner.dart:281:9) #26 AppContext.run. (package:flutter_tools/src/base/context.dart:150:19) #27 FlutterCommandRunner.runCommand (package:flutter_tools/src/runner/flutter_command_runner.dart:229:5) #28 run.. (package:flutter_tools/runner.dart:62:9) #29 AppContext.run. (package:flutter_tools/src/base/context.dart:150:19) #30 main (package:flutter_tools/executable.dart:94:3) [✓] VS Code (version 1.64.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.34.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 12.2 21D49 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.109 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. ``` ```console [✓] Flutter (Channel master, 2.11.0-0.0.pre.681, on macOS 12.2 21D49 darwin-arm, locale en-GB) • Flutter version 2.11.0-0.0.pre.681 at /Users/nexus/dev/sdks/flutters • Upstream repository https://github.com/flutter/flutter.git • Framework revision a288bd5e3f (75 minutes ago), 2022-02-24 23:06:19 -0600 • Engine revision 1012ac4b5a • Dart version 2.17.0 (build 2.17.0-141.0.dev) • DevTools version 2.11.0 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-32, 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.11+0-b60-7772763) • 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.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.1) • 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.11+0-b60-7772763) [✓] IntelliJ IDEA Community Edition (version 2021.3) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin version 213.5744.122 [✓] VS Code (version 1.64.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.34.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 12.2 21D49 darwin-arm • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.109 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ```

[marcusgregory]

I have the same problem, flutter 2.10.4 stable

[flutter-triage-bot[bot]]

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!

[flutter-triage-bot[bot]]

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.

[dam-ease]

Reproducible on the latest master and stable channels.

Video

https://github.com/flutter/flutter/assets/53122008/cc9f0d4c-7404-402e-b14c-5981b4a21825

stable, master flutter doctor -v

``` [!] Flutter (Channel stable, 3.16.9, on macOS 14.2.1 23C71 darwin-arm64, locale en-NG) • Flutter version 3.16.9 on channel stable at /Users/damilolaalimi/sdks/flutter ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/3.1.5/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/damilolaalimi/sdks/flutter. Consider adding /Users/damilolaalimi/sdks/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 41456452f2 (2 weeks ago), 2024-01-25 10:06:23 -0800 • Engine revision f40e976bed • Dart version 3.2.6 • DevTools version 2.28.5 • 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/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/damilolaalimi/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.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15C500b • CocoaPods version 1.14.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) [!] Android Studio (version unknown) • Android Studio at /Users/damilolaalimi/Downloads/Android Studio Preview.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 determine Android Studio version. • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) [✓] VS Code (version 1.86.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.78.0 [✓] VS Code (version 1.83.1) • VS Code at /Users/damilolaalimi/Downloads/Visual Studio Code.app/Contents • Flutter extension version 3.78.0 [✓] Connected device (4 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator) • Damilola’s iPhone (mobile) • 00008110-001964480AE1801E • ios • iOS 17.1.1 21B91 • macOS (desktop) • macos • darwin-arm64 • macOS 14.2.1 23C71 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 121.0.6167.160 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 2 categories. ``` ``` [!] Flutter (Channel master, 3.20.0-4.0.pre.62, on macOS 14.2.1 23C71 darwin-arm64, locale en-NG) • Flutter version 3.20.0-4.0.pre.62 on channel master at /Users/damilolaalimi/fvm/versions/master ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/3.1.5/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/damilolaalimi/fvm/versions/master. Consider adding /Users/damilolaalimi/fvm/versions/master/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 950e0025c4 (4 hours ago), 2024-02-09 00:38:30 -0500 • Engine revision f6dddb257a • Dart version 3.4.0 (build 3.4.0-116.0.dev) • DevTools version 2.32.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/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/damilolaalimi/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.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15C500b • CocoaPods version 1.14.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) [!] Android Studio (version unknown) • Android Studio at /Users/damilolaalimi/Downloads/Android Studio Preview.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 determine Android Studio version. • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) [✓] VS Code (version 1.86.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.78.0 [✓] VS Code (version 1.83.1) • VS Code at /Users/damilolaalimi/Downloads/Visual Studio Code.app/Contents • Flutter extension version 3.78.0 [✓] Connected device (5 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator) • Damilola’s iPhone (mobile) • 00008110-001964480AE1801E • ios • iOS 17.1.1 21B91 • macOS (desktop) • macos • darwin-arm64 • macOS 14.2.1 23C71 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.2.1 23C71 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 121.0.6167.160 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 2 categories. ```

[flutter-triage-bot[bot]]

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