[Web]: Editable text in TextFields not selectable if the text exceeds length of the TextFields.

[Wissperwind]

If the text in a TextField is too long, I can't select it. Problem is in Flutter WEB. Try too select "Hi". -> No problem. But try to select text in the TextField with the long text. -> not possible.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Test",
      home: Scaffold(body: TestPage()),
    );
  }
}

class TestPage extends StatelessWidget {
  TextEditingController _nameController;
  TextEditingController _cmdNameController;
  TextEditingController _cmdClassController;
  TextEditingController _cmdVariantController;
  TextEditingController _userController;
  TextEditingController _jobDataController;
  bool loading = false;
  String error = "";

  @override
  Widget build(BuildContext context) {

    var normalBorder = OutlineInputBorder(borderRadius: BorderRadius.circular(2), borderSide: BorderSide(color: Colors.black45, width: 0.5));
    var focusBorder = OutlineInputBorder(borderRadius: BorderRadius.circular(2), borderSide: BorderSide(color: Colors.black45, width: 1));
    InputDecoration textFiledDecoration = InputDecoration(
        border: normalBorder,
        focusedBorder: focusBorder,
        enabledBorder: normalBorder,
        contentPadding: EdgeInsets.symmetric(horizontal: 10)
    );

    _nameController = TextEditingController();
    TextField nameTextField = TextField(controller: _nameController, decoration: textFiledDecoration);
    _nameController.text = "Hi";
    SizedBox nameTextSizedBox = SizedBox(width: 500, child: nameTextField, height: 35);
    Row nameRow = _putInDescribedRow("Name:", nameTextSizedBox);

    _cmdNameController = TextEditingController();
    TextField cmdNameTextField = TextField(controller: _cmdNameController, decoration: textFiledDecoration);
    _cmdNameController.text = "Hi";
    SizedBox cmdNameTextSizedBox = SizedBox(width: 500, child: cmdNameTextField, height: 35);
    Row cmdNameRow = _putInDescribedRow("command name:", cmdNameTextSizedBox);

    _cmdClassController = TextEditingController();
    TextField cmdClassTextField = TextField(controller: _cmdClassController, decoration: textFiledDecoration);
    _cmdClassController.text = "Hi";
    SizedBox cmdClassTextSizedBox = SizedBox(width: 500, child: cmdClassTextField, height: 35);
    Row cmdClassRow = _putInDescribedRow("command class:", cmdClassTextSizedBox);

    _cmdVariantController = TextEditingController();
    TextField cmdVariantTextField = TextField(controller: _cmdVariantController, decoration: textFiledDecoration);
    _cmdVariantController.text = "You can't mark text in text field where the text is initially too long for the text field.";
    SizedBox cmdVariantTextSizedBox = SizedBox(width: 500, child: cmdVariantTextField, height: 35);
    Row cmdVariantRow = _putInDescribedRow("command variant:", cmdVariantTextSizedBox);

    _userController = TextEditingController();
    TextField userTextField = TextField(controller: _userController, decoration: textFiledDecoration);
    _userController.text = "Hi";
    SizedBox userTextSizedBox = SizedBox(width: 500, child: userTextField, height: 35);
    Row userRow = _putInDescribedRow("user:", userTextSizedBox);

    // _jobDataController = TextEditingController();
    // TextField jobDataTextField = TextField(controller: _jobDataController, decoration: textFiledDecoration, keyboardType: TextInputType.multiline, maxLines: 8, maxLengthEnforcement: MaxLengthEnforcement.enforced);
    // _jobDataController.text = "[Some]\nMultiLine\nContent that is displayed not correct.";
    // SizedBox jobDataTextSizedBox = SizedBox(width: 500, child: jobDataTextField, height: 150);
    // Row jobDataRow = _putInDescribedRow("job data:", jobDataTextSizedBox);

    //Save Button

    // GlobalXButton saveButton = GlobalXButton(text: "Speichern", onPressed: _updateStartConfiguration, iconConstant: IconConstants.save);
    // Row saveButtonPositioned = Row(children: [saveButton], mainAxisAlignment: MainAxisAlignment.center);

    //assemble everything together

    List<Widget> content = [nameRow, SizedBox(height: 8), cmdNameRow, SizedBox(height: 8), cmdClassRow, SizedBox(height: 8), cmdVariantRow,
      SizedBox(height: 8), userRow, SizedBox(height: 8), /*jobDataRow, SizedBox(height: 15), saveButtonPositioned*/];

    if (error != "") {

      content.add(SizedBox(height: 12));
      Text errorText = Text(error, style: TextStyle(color: Colors.red));
      Row errorRow = Row(children: [errorText], mainAxisAlignment: MainAxisAlignment.center);
      content.add(errorRow);
    }

    if (loading) {
      content.add(SizedBox(height: 12));
      // content.add(LoadingSpinner());
    }

    Column column = Column(
        children: content,
        crossAxisAlignment: CrossAxisAlignment.start
    );

    return Container(child: column, color: Colors.white, padding: EdgeInsets.all(15),);

    // WhiteContentArea whiteContentArea = WhiteContentArea(child: column);
    // return whiteContentArea;
  }

  Row _putInDescribedRow(String text, Widget widget) {

    double descriptionWidth = 120;
    SizedBox description = SizedBox(child: Text(text, style: TextStyle(fontSize: 15)), width: descriptionWidth);
    Row row = Row(children: [description, SizedBox(width: 8), widget]);

    return row;

  }

}

[√] Flutter (Channel beta, 2.2.0, on Microsoft Windows [Version 10.0.19043.985], locale de-DE)
    • Flutter version 2.2.0 at C:\Users\akilian\Flutter SDK\flutter
    • Framework revision b22742018b (4 weeks ago), 2021-05-14 19:12:57 -0700
    • Engine revision a9d88a4d18
    • Dart version 2.13.0

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\akilian\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

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

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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.52.1)
    • VS Code at C:\Users\akilian\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.77
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 90.0.818.49

! Doctor found issues in 1 category.

[darshankawar]

This behavior doesn't seem to be specific to web, since, on desktop too, same case occurs and as per this comment, text is not selectable by default in Flutter. You may try to use SelectTableText and see if it helps to achieve your requirement.

[Wissperwind]

Hi, In this case we are looking at editable text (TextField). Not read only text. This should be selectable.

[Bestfastfire]

[√] Flutter (Channel beta, 2.2.0, on Microsoft Windows [versão 10.0.19042.985], locale pt-BR)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.8.3)
[√] Android Studio (version 4.1.0)
[√] VS Code (version 1.56.2)
[√] Connected device (3 available)

! Doctor found issues in 1 category.

On windows build:

See, if I try select and swipe to up/down, the scroll in text field dont move, If I scroll manual in mouse, the select will go deselect:

[darshankawar]

Thanks for the details. I see the same behavior, ie, the text in the Editable text or TextField isn't selectable using cursor / trackpad / mouse if the text in it is more than the length of the Field, as shown below:

https://user-images.githubusercontent.com/67046386/121642679-7a4e3c80-caae-11eb-9ac4-9f4d2979beac.mov

If the text in the field is inside the length of the field, the text is selectable, as below:

https://user-images.githubusercontent.com/67046386/121642720-8b974900-caae-11eb-8257-bedf99978991.mov

This behavior occurs on desktop too.

flutter doctor -v

``` [✓] Flutter (Channel stable, 2.2.1, on Mac OS X 10.15.4 19E2269 darwin-x64, locale en-GB) • Flutter version 2.2.1 at /Users/dhs/documents/fluttersdk/flutter • Framework revision 02c026b03c (4 days ago), 2021-05-27 12:24:44 -0700 • Engine revision 0fdb562ac8 • Dart version 2.13.1 [✓] Xcode - develop for iOS and macOS • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 12.3, Build version 12C33 • CocoaPods version 1.10.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.55.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (4 available) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.77 • No issues found! ```

[Bestfastfire]

Thanks for the details. I see the same behavior, ie, the text in the Editable text or TextField isn't selectable using cursor / trackpad / mouse if the text in it is more than the length of the Field, as shown below:

Screen.Recording.2021-06-11.at.12.11.05.PM.mov If the text in the field is inside the length of the field, the text is selectable, as below:

Screen.Recording.2021-06-11.at.12.12.13.PM.mov This behavior occurs on desktop too.

flutter doctor -v

See my comment when textfield has multilines, I can even select but it will deselect itself when scrolling the scroll

[Wissperwind]

It seems to be fixed in "Channel master, 2.3.0-17.0.pre.345" Can someone verify this? But there is still a problem: If you start selecting and move your courser to the right, over the border, you expect that the text scrolls automatically and you can select to the end. But that is missing. Shall I open a new issue for this?

[yjbanov]

I believe this was fixed by @jonahwilliams' fix for mouse drags inside scrollables. Autoscrolling during selection is probably not implemented in the framework. I'm going to relabel it as a framework issue.

/cc @goderbauer feel free to decide if you'd like a separate issue for scroll while selecting

[asmengistu]

In case it's helpful, a workaround we've been using for this issue is setting the scrollPhysics on the TextField to NeverScrollableScrollPhysics.

It's not ideal since our users can't see the text that overflows the TextField, but it's better than the alternative (for us).

[kenzieshimrock]

I have been having this same issue where horizontal edge scrolling is not possible within the text field when dragging to select text that exceeds the length of the TextField viewport. It seems as if the text is still selected, but without any scroll to see what is selected. Has anyone found a workaround for this?

[kenzieshimrock]

I have been having this same issue where horizontal edge scrolling is not possible within the text field when dragging to select text that exceeds the length of the TextField viewport. It seems as if the text is still selected, but without any scroll to see what is selected. Has anyone found a workaround for this?

Selecting text with a mouse and horizontally scrolling with a trackpad at the same time seems to do the trick, but that is not a solution.

[MasahideMori-SimpleAppli]

I'm stuck with this problem right now. My client told me that the text input was not cool. Any chance of a solution? I work around it by specifying "maxLines: null" for now, but it can make the UI less cool.

[flutter-triage-bot[bot]]

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