flutter icon indicating copy to clipboard operation
flutter copied to clipboard

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

Open txufiknr opened this issue 3 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.

txufiknr avatar Dec 08 '22 08:12 txufiknr

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

txufiknr avatar Dec 08 '22 12:12 txufiknr

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

txufiknr avatar Dec 09 '22 02:12 txufiknr

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.

txufiknr avatar Dec 09 '22 09:12 txufiknr

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]