flutter
flutter copied to clipboard
flutter web - Press Shift+Enter for new line in multiline TextField widget
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.
Hello @topex-psy. You can add maxLines: null
to the TextField
to make it a multiline input
maxLines: null
Yes, I've checked it and it was already given maxLines: null
Then you should be able to press Enter (without shift) and a new line will be inserted
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
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.
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.