flutter / flutter/flutter

[Web]: Tab key skips second textfield and jumps to third field directly in Korean language.

Open
#156,380 5 comments 3 reactions 0 assignees View on GitHub
a: internationalization a: text input browser: chrome-desktop found in release: 3.24 found in release: 3.26 has reproducible steps P2 platform-macos platform-web team-web triaged-web
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

The Tab key on the Flutter basically moves vertically. I've been using multiple TextFields vertically, and at some point in my Chrome browser, type Korean in TextField and press the Tab key to go directly to the 3rd TextField field instead of the next TextField.
It works fine with Safari browsers, and the problem only occurs with Macos' Chrome browser. (Windows's Chrome browser works fine.)
This problem does not occur when you enter English or Chinese.
The problem occurs only when Korean is entered, but I don't know how to solve it.

### Expected results

![스크린샷 2024-10-08 오전 9 59 13](https://github.com/user-attachments/assets/4e89f043-740d-40cf-b8aa-894d65ffdc2a)
![스크린샷 2024-10-08 오전 9 59 24](https://github.com/user-attachments/assets/b2c860b6-ac28-4eb6-9fd8-579eae37d094)

### Actual results

I keep having this issue even after updating my Chrome browser multiple times, and I've checked the Flutter Web on Macos

### Code sample

Code sample

```dart
TextFormField(
autovalidateMode: AutovalidateMode.always,
style: TextStyle(fontSize: 18),
decoration: InputDecoration(
icon: const Icon(Icons.storefront),
hintText: '상호',
labelText: widget.customer['store_name']==""?"상호":widget.customer['store_name'],
labelStyle: const TextStyle(color: Colors.black, fontWeight: FontWeight.w200)
),
onSaved: (value) {
setState(() {
if (value==""){
value = widget.customer['store_name'];
} else{
widget.customer['store_name'] = value.toString();
}
});
},
onChanged: (value){
setState(() {
widget.customer['store_name'] = value.toString();
});
},
validator: (value) {
if (value == null) {
return '상호를 입력해 주세요.';
}
return null;
},
),
TextFormField(
autovalidateMode: AutovalidateMode.disabled,
style: TextStyle(fontSize: 18),
decoration: InputDecoration(
icon: const Icon(Icons.person_3),
hintText: '대표자명',
labelText: widget.customer['customer_name']==""?"대표자명":widget.customer['customer_name'],
labelStyle: const TextStyle(color: Colors.black, fontWeight: FontWeight.w200)
),
onSaved: (value) {
setState(() {
if (value==""){
value=widget.customer['customer_name'];
} else{
widget.customer['customer_name'] = value!;
}
});
},
),
TextFormField(
controller: bizNumController,
style: TextStyle(fontSize: 18),
decoration: InputDecoration(
icon: const Icon(Icons
.drive_file_rename_outline_rounded),
hintText: '사업자 번호는 - 없이 숫자만 입력 해주세요.',
labelText: widget.customer['biz_number']==""?'사업자 번호는 - 없이 숫자만 입력 해주세요.':widget.customer['biz_number'],
labelStyle: const TextStyle(color: Colors.black, fontWeight: FontWeight.w200),
helperText: bizNumLabelText,
helperStyle: const TextStyle(color: Colors.red, fontSize: 14, fontWeight: FontWeight.w200)
),
onSaved: (value) {
setState(() {
if (bizNumController.text==""){
widget.customer['biz_number']="";
} else{
if (bizNumRegex.hasMatch(value!)) {
widget.customer['biz_number'] = value!;
} else{
value=null;
}
}
});
},
validator: (value) {
if (value == null) {
return "사업자 번호는 - 없이 숫자만 입력 해주세요.";
}
return null;
},
onChanged: (value) {
setState(() {
if (bizNumRegex.hasMatch(value)) {
bizNumLabelText =
"올바른 형식의 사업자 등록 번호 입니다.";
} else {
bizNumLabelText =
"사업자 번호는 - 없이 숫자만 입력 해주세요.";
}
});
},
),
```

### Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

### Logs

Logs

```console
[Paste your logs here]
```

### Flutter Doctor output

Doctor output

```console
[✓] Flutter (Channel stable, 3.24.3, on macOS 15.0.1 24A348 darwin-arm64, locale ko-KR)
• Flutter version 3.24.3 on channel stable at /Users/seo/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 2663184aa7 (4 weeks ago), 2024-09-11 16:27:48 -0500
• Engine revision 36335019a8
• Dart version 3.5.3
• DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/seo/Library/Android/sdk
• Platform android-34-ext8, build-tools 34.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16A242d
• CocoaPods version 1.15.2

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1)
• 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
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)

[✓] VS Code (version 1.79.2)
• VS Code at /Users/seo/Downloads/Visual Studio Code.app/Contents
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.