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
166.26k stars 27.51k forks source link

Newline in Textformfield does not work on desktop #93373

Open dninet opened 3 years ago

dninet commented 3 years ago

Steps to Reproduce

  1. Have a Textformfield
  2. Build web app
  3. Attempt to insert a newline in any web browser

Expected results:

A new line

Actual results:

Not a new line

TextFormField(
    maxLines: 4,
    minLines: 3,
    controller: editingControllers['addr'],
    onChanged: (String val) => _changed(),
    textInputAction: TextInputAction.newline,
    keyboardType: TextInputType.streetAddress,
    decoration: InputDecoration(
        alignLabelWithHint: true,
        labelText: 'Address',
        hintMaxLines: 3,
        hintText:
            '124. Conch street\n00802 Bikini Bottom\nU.S. Virgin Islands'),
),

I have found similar issues on github, all of which were left unanswered and automatically closed by bots.

mamuseferha commented 3 years ago

Hi @AlbertDavid94, thank you for filing this issue.

I tested this on the latest master and stable channel and the issue is reproducible

code sample ```dart import 'package:flutter/material.dart'; void main() => runApp(const App()); class App extends StatelessWidget { const App({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( home: HomePage(), ); } } class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: TextFormField( maxLines: 4, minLines: 3, textInputAction: TextInputAction.newline, keyboardType: TextInputType.streetAddress, decoration: const InputDecoration( alignLabelWithHint: true, labelText: 'Address', hintMaxLines: 3, hintText: '124. Conch street\n00802 Bikini Bottom\nU.S. Virgin Islands'), ), ), ); } } ```
flutter doctor -v ```bash [✓] Flutter (Channel stable, 2.5.3, on macOS 11.6.1 20G224 darwin-x64, locale en-US) • Flutter version 2.5.3 at /Users/flo/development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 18116933e7 (4 weeks ago), 2021-10-15 10:46:35 -0700 • Engine revision d3ea636dc5 • Dart version 2.14.4 [!] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/flo/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) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 13.0, Build version 13A5212g • CocoaPods version 1.11.0 [✓] 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.60.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.27.0 [✓] Connected device (4 available) • sdk gphone x86 (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator) • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator) • macOS (desktop) • macos • darwin-x64 • macOS 11.6.1 20G224 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 93.0.4577.63 ! Doctor found issues in 1 category. ``` ```bash [✓] Flutter (Channel master, 2.6.0-12.0.pre.670, on macOS 11.6.1 20G224 darwin-x64, locale en-US) • Flutter version 2.6.0-12.0.pre.670 at /Users/flo/fvm/versions/master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 858a328712 (2 hours ago), 2021-11-09 22:22:14 -0800 • Engine revision 76bf5a1ad0 • Dart version 2.15.0 (build 2.15.0-285.0.dev) [!] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/flo/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) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses [✓] Xcode - develop for iOS and macOS (Xcode 13.0) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.11.0 [✓] 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.60.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.27.0 [✓] Connected device (4 available) • sdk gphone x86 (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator) • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator) • macOS (desktop) • macos • darwin-x64 • macOS 11.6.1 20G224 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 93.0.4577.63 ! Doctor found issues in 1 category. ```

Thank you

jmewes commented 2 years ago

More precisely, the newline is not supported in TextFormField for keyboardType: TextInputType.streetAddress. If you use TextInputType.multiline, you can enter multiple lines into the TextFormField.

Maybe even more precisely, it seems not to be supported for TextInputType.text which is the fallback value for the unsupported TextInputType.streetAddress

See https://github.com/flutter/engine/blob/50ccb0fffb1ccad43c0ea283250639ee4e04ef73/lib/web_ui/lib/src/engine/text_editing/input_type.dart#L9-L36


By the way, I can reproduce the issue on Linux as well. For Linux there seems be a similar fallback behavior:

See https://github.com/flutter/engine/blob/50ccb0fffb1ccad43c0ea283250639ee4e04ef73/shell/platform/linux/fl_text_input_plugin.cc#L277-L292

mdebbar commented 2 years ago

I doubt this is a web-specific issue. What happens if you try building a macOS app?

jmewes commented 2 years ago

I can reproduce the issue on macOS (desktop) as well.

On iOS emulator the multi-line address can be entered, just as on the Android emulator.

flutter --version ``` $ flutter --version Flutter 2.7.0-3.1.pre • channel beta • https://github.com/flutter/flutter.git Framework • revision fc7015e35a (7 weeks ago) • 2021-10-27 15:18:41 -0700 Engine • revision a75e3b80f9 Tools • Dart 2.15.0 (build 2.15.0-178.1.beta) ```
gspencergoog commented 2 years ago

cc @justinmc

cbracken commented 2 years ago

I'm wondering if this might be more general than just newlines. https://github.com/flutter/flutter/issues/96726 was filed which indicates that onsubmit is not firing when using the enter key, though I haven't tried to repro. Wondering if possibly related to https://github.com/flutter/flutter/pull/90211.

justinmc commented 2 years ago

I can still reproduce this (on Mac) though I see that https://github.com/flutter/flutter/issues/96726 and https://github.com/flutter/flutter/pull/90211 were merged.

pasnox commented 9 months ago

This is still an issue on Desktop, on Android the new line keyboard key is visible, but tapping it does not insert new line. so it's still all broken.

flutter-triage-bot[bot] commented 5 months ago

The triaged-desktop label is irrelevant if there is no team-desktop label or fyi-desktop label.