Repository navigation
[Web] When the input field is restricted to only allow numbers, switching to the Chinese input method results in the entered numbers being gradually deleted, and it also allows exceeding the maximum input limit. #138136
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
flutter for web
- Install Chinese input on a Windows computer.
- Set the input to only support numbers and have a maximum length of 8 characters.
- After completing the above steps, when entering a few numbers and switching to Chinese input mode, clicking in the input field causes the previously entered numbers to be gradually deleted, and it also allows exceeding the maximum input limit.
Expected results
flutter for web
When restricting user input to numbers, switching the input method to Chinese should not affect the already entered content.
When the maximum limit is set, users should not be allowed to input more characters than the maximum limit.
Actual results
flutter for web
First, I created an input field that restricts users to enter only numbers and has a maximum length of 8 characters.
When I switch the input to Chinese, I observed that although Chinese characters cannot be entered, the existing numbers in the input field are being deleted by entering a letter. Why is this happening?
There is another issue: even though I have set the maximum length to 8 characters, it is still exceeding the limit.
Code sample
Code sample
class CustomTextField extends StatelessWidget {
final double width;
final double height;
final bool allowDecimal;
final TextEditingController controller;
final Function(String)? onSubmitted; // 用于处理回车事件
CustomTextField({this.width = 50, this.height = 30, this.allowDecimal = false,required this.controller,this.onSubmitted});
@override
Widget build(BuildContext context) {
List<TextInputFormatter> inputFormatters = [];
if (allowDecimal) {
inputFormatters = [FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,2}'))];
} else {
inputFormatters = [FilteringTextInputFormatter.digitsOnly];
}
return Container(
width: width,
height: height,
alignment: Alignment.center,
child: TextField(
controller: controller,
inputFormatters: inputFormatters,
style: const TextStyle(fontSize: 12.0), // 设置文字大小
cursorWidth: 1.5, // 设置光标宽度
maxLength: 8,
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(horizontal: 2),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0),
),
),
onSubmitted: onSubmitted,
),
);
}
}
CustomTextField(
width: 300,
height: 80,
allowDecimal: true,
controller: TextEditingController(),
)Screenshots or Video
Screenshots / Video demonstration
toolnb-20231109080543.mp4
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
No Log.Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listSupporting other languages or locales. (aka i18n)Entering text in a text field or keyboard related problemsFound to occur in 3.13Found to occur in 3.17flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onWeb applications specificallyOwned by Web platform teamTriaged by Web platform team
Activity
huycozy commentedon Nov 10, 2023
Thanks for the report. I can reproduce this issue on Web (canvaskit and html renderers). When switching to Chinese input method, enter some alphabet character (they can't be inputted as it only accepts number) and then enter numbers to the field, the issue appears.
I also check it on macOS, the issue doesn't happen there.
flutter doctor -v (stable and master)
[✓] Flutter (Channel stable, 3.13.9, on macOS 14.1 23B74 darwin-x64, locale en-VN) • Flutter version 3.13.9 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision d211f42860 (11 days ago), 2023-10-25 13:42:25 -0700 • Engine revision 0545f8705d • Dart version 3.1.5 • DevTools version 2.25.0 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.0.1) • Xcode at /Users/huynq/Downloads/Xcode.app/Contents/Developer • Build 15A507 • CocoaPods version 1.13.0 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.3) • Android Studio at /Applications/Android Studio Giraffe.app/Contents • 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 17.0.6+0-17.0.6b829.9-10027231) [✓] Android Studio (version 2022.2) • Android Studio at /Applications/Android Studio.app/Contents • 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 • android-studio-dir = /Applications/Android Studio.app/ • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.84.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.76.0 [✓] Connected device (4 available) • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 11 (API 30) • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios • iOS 15.7.9 19H365 • macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 118.0.5993.117 [✓] Network resources • All expected network resources are available. • No issues found![-]flutter web When the input field is restricted to only allow numbers, switching to the Chinese input method results in the entered numbers being gradually deleted, and it also allows exceeding the maximum input limit.[/-][+][Web] When the input field is restricted to only allow numbers, switching to the Chinese input method results in the entered numbers being gradually deleted, and it also allows exceeding the maximum input limit.[/+]htoor3 commentedon Nov 15, 2023
@huycozy do you mean for a macOS flutter app? Or does the issue not occur on chrome desktop on a macOS?
huycozy commentedon Nov 16, 2023
@htoor3 Yes, I meant macOS Flutter app (issue doesn't happen). The issue happens on Chrome (I checked on macOS host machine) as the screenshot above.
htoor3 commentedon Nov 16, 2023
Ah ok, so the issue isn't dependent on Windows + Chrome. Thank you for checking!
IME seems to be replacing the existing numbers, maybe because it considers them part of the composing text?
[web] Drop stale composing range after text is replaced mid-compositi…
github-actions commentedon Oct 28, 2026
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 -vand a minimal reproduction of the issue.[web] Drop stale composing range after text is replaced mid-compositi…