search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
164.12k stars 27.05k forks source link

Empty space on TextField bug when using Chinese Keyboard (iOS) #79025

Open LiewJunTung opened 3 years ago

LiewJunTung commented 3 years ago

I encountered this bug when developing the login screen for an app. Where myemail@email.com will changed to myemail@email.co m when using a Chinese keyboard. This issue is not found on vanilla iOS application. This can be solved temporarily via setting the FilteringTextInputFormatter.deny(RegExp('[\\s]')).

Steps to Reproduce

  1. Run flutter create bug.
  2. Update the main.dart to include the follow: 
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        TextField(
          keyboardType: TextInputType.text,
        ),
        TextField(
          keyboardType: TextInputType.emailAddress,
        ),
      ],
    )
  3. Change to Chinese Keyboard via iOS settings
  4. Type text with Chinese shorthand. Example, p g => 苹果. Before the Chinese character is selected. Click on the other textfield

Expected results: Created with a sample Swift UI project with 2 TextFields

https://user-images.githubusercontent.com/4220976/112440478-54ee4400-8d85-11eb-89f1-2ad5c6c002cb.MP4

Actual results:

https://user-images.githubusercontent.com/4220976/112440513-5f104280-8d85-11eb-8920-02601a71c339.MP4

Logs ``` ``` ``` ``` ``` [✓] Flutter (Channel stable, 2.0.3, on macOS 11.1 20C69 darwin-arm, locale en-GB) • Flutter version 2.0.3 at /Users/liewjuntung/Applications/flutter • Framework revision 4d7946a68d (6 days ago), 2021-03-18 17:24:33 -0700 • Engine revision 3459eb2436 • Dart version 2.12.2 [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Users/liewjuntung/Library/Android/sdk • Platform android-30, build-tools 30.0.3 • Java binary at: /Users/liewjuntung/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7185775/Android Studio Preview.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.4, Build version 12D4e • CocoaPods version 1.10.1 [✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome) ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable. [✓] Android Studio • Android Studio at /Users/liewjuntung/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7185775/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 • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174) [✓] VS Code (version 1.54.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.20.0 [✓] Connected device (1 available) • USiPh11P1 (mobile) • 00008030-000579010C78802E • ios • iOS 14.2 ! Doctor found issues in 1 category. ```
pedromassangocode commented 3 years ago

I was able to reproduce this issue.

flutter doctor -v ```bash [✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale en-AO) • Flutter version 2.0.3 at /Users/pedromassango/Code/flutter_stable • Framework revision 4d7946a68d (6 days ago), 2021-03-18 17:24:33 -0700 • Engine revision 3459eb2436 • Dart version 2.12.2 [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) • Android SDK at /Users/pedromassango/Library/Android/sdk • Platform android-30, build-tools 30.0.2 • ANDROID_HOME = /Users/pedromassango/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) • All Android licenses accepted. [!] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.4, Build version 12D4e ! CocoaPods 1.9.3 out of date (1.10.0 is recommended). CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.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 1.8.0_242-release-1644-b3-6915495) [✓] IntelliJ IDEA Community Edition (version 2020.3.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 54.0.3 • Dart plugin version 203.7759 [✓] VS Code (version 1.54.3) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.16.0 [✓] Connected device (3 available) • iPhone 12 Pro Max (mobile) • AE2F4F51-880E-44FB-BB29-171B766D9B54 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator) • macOS (desktop) • macos • darwin-x64 • macOS 11.2.3 20D91 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90 ! Doctor found issues in 1 category. ``` ```bash [✓] Flutter (Channel master, 2.1.0-13.0.pre.261, on macOS 11.2.3 20D91 darwin-x64, locale en-AO) • Flutter version 2.1.0-13.0.pre.261 at /Users/pedromassango/Code/flutter_master • Framework revision b44e536c62 (24 minutes ago), 2021-03-24 23:09:02 -0700 • Engine revision d59a01d2d3 • Dart version 2.13.0 (build 2.13.0-150.0.dev) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) • Android SDK at /Users/pedromassango/Library/Android/sdk • Platform android-30, build-tools 30.0.2 • ANDROID_HOME = /Users/pedromassango/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) • All Android licenses accepted. [!] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.4, Build version 12D4e ! CocoaPods 1.9.3 out of date (1.10.0 is recommended). CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions. [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.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 1.8.0_242-release-1644-b3-6915495) [✓] IntelliJ IDEA Community Edition (version 2020.3.2) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin version 54.0.3 • Dart plugin version 203.7759 [✓] VS Code (version 1.54.3) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.16.0 [✓] Connected device (3 available) • iPhone 12 Pro Max (mobile) • AE2F4F51-880E-44FB-BB29-171B766D9B54 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator) • macOS (desktop) • macos • darwin-x64 • macOS 11.2.3 20D91 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90 ! Doctor found issues in 1 category. ```
chinmaygarde commented 3 years ago

cc @gspencergoog

gspencergoog commented 3 years ago

cc @cbracken

cbracken commented 2 years ago

Catching up on GitHub notifications -- /cc @justinmc who has the most recent context on text input on iOS.

justinmc commented 2 years ago

To me it looks like we should finish the composing when the focus leaves the field. This would let the IME remove the space that it added. Currently we just clear the composing range (code).

I think that would mean adding a new platform channel method to request that the platform finish composing. On Android it would call [finishComposingText](https://developer.android.com/reference/android/view/inputmethod/InputConnection#finishComposingText()).