Web - TextFormField issues (newline, selection, arrow keys)

[jehlinge]

I have found a few issues with the TextFormField when using a flutter web build:

• New line characters can't be entered or pasted
• Selecting text with the cursor selects text in the wrong position
• Using the left and right arrows doesn't always work correctly. Most of the time the cursor moves 2 characters at a time

The example below is not using a Form widget to keep the example brief. Same results using it within a form, with or without a validator, and with or without a text editing controller.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
         primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: TextFormField(
          textInputAction: TextInputAction.newline,
          decoration: InputDecoration( labelText: "Text Form Field"),
          maxLines: 10,
          keyboardType: TextInputType.text,
        )
      )
    );
  }
}

Same problem with chrome and firefox browsers on windows and android mobile.

[√] Flutter (Channel master, v1.10.15-pre.252, on Microsoft Windows [Version 10.0.16299.1451], locale en-US)
    • Flutter version 1.10.15-pre.252 at C:\projectFiles\flutter
    • Framework revision 903ebd714d (16 hours ago), 2019-10-24 21:35:14 -0700
    • Engine revision 8d6b74aee6
    • Dart version 2.6.0 (build 2.6.0-dev.8.2 1bd6e20d76)


[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\jjehling\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 28.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 40.2.2
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] VS Code (version 1.39.2)
    • VS Code at C:\Users\jjehling\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.5.1

[√] Connected device (2 available)
    • Chrome     • chrome     • web-javascript • Google Chrome 74.0.3729.169
    • Web Server • web-server • web-javascript • Flutter Tools

• No issues found!

[nturgut]

Thanks for filing the issue. For the issues, can you give more details:
(a) which browsers the issues occurred?
(b) did the code run on ddc or profile/release mode?

Can you also share a code sample?

[nturgut]

There are 2 issues we have for multiline text editing, which might be related to your issue:

#39826
#32213

I also created a new issue for newline in multiline text. It worked for copy/paste for me (using chrome desktop) #43935

I wasn't able to reproduce "Using the left and right arrows doesn't always work correctly. Most of the time the cursor moves 2 characters at a time" @jehlinge I'm waiting for more input for this one.

[jehlinge]

Thanks for filing the issue. For the issues, can you give more details:
(a) which browsers the issues occurred?
(b) did the code run on ddc or profile/release mode?

Can you also share a code sample?

a) This is occurring for me in chrome and firefox on windows 10. It also occurs on Android with chrome.
b) I see this issue run on ddc as well as on a deployed release website

I have a code sample in my original post that reproduces the issue.

[jehlinge]

I also created a new issue for newline in multiline text. It worked for copy/paste for me (using chrome desktop) #43935

Glad you could recreate not being able to add a new line with the keyboard. I just updated to the latest version of flutter and still see the new line issue regardless of entering in the keyboard or trying to cut and paste. See the attached video:

For the arrow keys, here is a video of that. Not sure what other info I could provide.

[jehlinge]

Here is another variation of a new line problem that I noticed. IF you initialize the text field with a string with new lines, they appear fine. As soon as you click on it to edit, the new lines disappear.

[jehlinge]

I saw some work getting done for this and decided to try the latest dev build. The following all appear to work:

• Enter key to add a new line
• Cut and paste with new lines work
• Moving the cursor with the arrow key is better (see explanation below)

Selecting text with the cursor is still a bit wonky when there are multiple lines. It works as expected for the first line but doesn't for subsequent lines. See the GIF below:

For the arrow keys, if the arrow key is held down the cursor actually moves repeatedly but it doesn't show the actual cursor until the arrow key is released. It seems to work okay with the shift key to select a range of text. See the GIF below:

[nturgut]

This issue handles the second point: #44133

Closing this issue since all is duplicate now.

[github-actions]

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.