flutter icon indicating copy to clipboard operation
flutter copied to clipboard

flutter web - Press Shift+Enter for new line in multiline TextField widget

Open topex-psy opened this issue 2 years ago • 3 comments

In flutter web, I need to create a text input field which is user for post a comment, so it's multiline and user can, as standard:

  • press Shift+Enter for new line
  • press Enter for submit

Steps to Reproduce

I use TextField widget with keyboardType: TextInputType.multiline and this focusNode which I got from https://stackoverflow.com/a/69359022/5060513

late final _commentFocusNode = FocusNode(
  onKey: (FocusNode node, RawKeyEvent evt) {
    if (!evt.isShiftPressed && evt.logicalKey.keyLabel == 'Enter') {
      if (evt is RawKeyDownEvent) {
        _sendComment();
      }
      return KeyEventResult.handled;
    }
    else {
      return KeyEventResult.ignored;
    }
  },
);

It used to work like a charm, but now (I don't know from when/which flutter update) it's no longer work. Can anyone help me solve this issue?

Expected results:

After press Shift+Enter: New line ✔️ After press Enter: Submit ✔️

Actual results:

After press Shift+Enter: Submit ❌ After press Enter: Submit ✔️

Code sample
TextField(
  focusNode: widget.focusNode,
  keyboardType: TextInputType.multiline,
  maxLines: null,
  ...
)
Logs
[√] Flutter (Channel stable, 3.3.7, on Microsoft Windows [Version 10.0.19045.2251], locale en-ID)
    • Flutter version 3.3.7 on channel stable at F:\Android\Flutter\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision e99c9c7cd9 (5 weeks ago), 2022-11-01 16:59:00 -0700
    • Engine revision 857bd6b74c
    • Dart version 2.18.4
    • DevTools version 2.15.0

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at F:\Android\sdk
    • Platform android-33, build-tools 30.0.3
    • Java binary at: F:\Installer\Programming\Android Studio\android-studio-2021.2.1.11-windows\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

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

[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 4.1)
    • Android Studio at F:\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 1.8.0_242-release-1644-b01)

[√] Android Studio (version 2021.2)
    • Android Studio at F:\Installer\Programming\Android Studio\android-studio-2021.2.1.11-windows\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.12+7-b1504.28-7817840)

[√] VS Code (version 1.73.1)
    • VS Code at C:\Users\topex\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.54.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.2251]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 108.0.5359.98
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 108.0.1462.42

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

! Doctor found issues in 1 category.

topex-psy avatar Dec 08 '22 08:12 topex-psy

Hello @topex-psy. You can add maxLines: null to the TextField to make it a multiline input

exaby73 avatar Dec 08 '22 12:12 exaby73

maxLines: null

Yes, I've checked it and it was already given maxLines: null

topex-psy avatar Dec 08 '22 12:12 topex-psy

Then you should be able to press Enter (without shift) and a new line will be inserted

exaby73 avatar Dec 08 '22 13:12 exaby73

Then you should be able to press Enter (without shift) and a new line will be inserted

But that's not my need, my need is Enter (without shift) for post _sendComment();, and Shift+Enter for new line

topex-psy avatar Dec 09 '22 02:12 topex-psy

I've solved this issue, the culprit is textInputAction. I had to change the textInputAction value from TextInputAction.done to TextInputAction.none and it's now works like it used to be.

Now I'll close this. Thank you.

topex-psy avatar Dec 09 '22 09:12 topex-psy

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.

github-actions[bot] avatar Mar 05 '23 02:03 github-actions[bot]