TextField's cursor offset is weired

[inho1213]

Steps to reproduce

I'm using flutter version 3.19.3.

1. Create a TextField widget like below:

TextField(
    keyboardType: TextInputType.multiline,
    textInputAction: TextInputAction.unspecified,
    autocorrect: false,
    controller: TextEditingController(),
)

2. Build for web, and then input any text to opened browser. You can find that cursor offset is on middle of the input text.

IMHO, TextField has a bug when building widget. It uses "iOSHorizontalOffset" although target platform is macOS. (1402 line of "material/text_field.dart") When I remove that line, I can see the expected result.

Expected results

Actual results

Code sample

TextField(
    keyboardType: TextInputType.multiline,
    textInputAction: TextInputAction.unspecified,
    autocorrect: false,
    controller: TextEditingController(),
)

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output

```console [✓] Flutter (Channel stable, 3.19.3, on macOS 14.3 23D56 darwin-arm64, locale ko-KR) • Flutter version 3.19.3 on channel stable at /usr/local/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision ba39319843 (3 weeks ago), 2024-03-07 15:22:21 -0600 • Engine revision 2e4ba9c6fb • Dart version 3.3.1 • DevTools version 2.31.1 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0-rc1) • Android SDK at /Users/inhokye/Library/Android/sdk • Platform android-34-ext8, build-tools 34.0.0-rc1 • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15C500b • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.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 • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874) [✓] IntelliJ IDEA Community Edition (version 2023.3.6) • IntelliJ at /Applications/IntelliJ IDEA CE.app • 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 [✓] VS Code (version 1.85.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension can be installed from: 🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter [✓] Connected device (5 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 13 (API 33) (emulator) • inho의 iPhone (mobile) • 00008110-00124D0434A0201E • ios • iOS 17.2.1 21C66 • iPhone 15 Pro Max (mobile) • 869C76B7-2131-4BAF-8925-8ED027F9E794 • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 14.3 23D56 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.86 ! Error: Browsing on the local area network for Neptune (2). Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27) [✓] Network resources • All expected network resources are available. • No issues found! ```

[danagbemava-nc]

Hi @inho1213, I just tested this on stable 3.19.4 with the sample below and I don't see any issues with the cursor position. Can you provide a complete minimal sample with detailed steps to reproduce the issue?

https://github.com/flutter/flutter/assets/88313112/b31ce33f-0ef5-420f-b34e-c742a8270b96

sample used

```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.green), useMaterial3: false, ), home: const MyHomePage(title: 'Scrollbar'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title), ), body: Center( child: TextField( keyboardType: TextInputType.multiline, textInputAction: TextInputAction.unspecified, autocorrect: false, controller: TextEditingController(), ), ), ); } } ```

[inho1213]

@danagbemava-nc

Oh! sorry for late. I have upgraded to the latest version 3.19.5. But still encounter wrong result.

https://github.com/flutter/flutter/assets/12997796/36385bc9-b7a7-4a65-8a22-24d33d559eb2

Related code is like below:

    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('이메일을 입력하세요'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'If you are an AppStore reviewer, CHECK the note for reviewers in AppStore. There is guide to sign-in.',
                style: TextStyle(
                  fontSize: 12.sp,
                ),
              ),
              TextField(
                keyboardType: TextInputType.multiline,
                textInputAction: TextInputAction.unspecified,
                autocorrect: false,
                onChanged: (value) {
                  setState(() {
                    valueText = value;
                  });
                },
                controller: _textFieldController,
              ),
            ],
          ),
          actions: <Widget>[
            TextButton(
              child: const Text('CANCEL'),
              onPressed: () {
                setState(() {
                  Navigator.pop(context);
                });
              },
            ),
            TextButton(
              child: const Text('OK'),
              onPressed: () {
                setState(() {
                  Navigator.of(context).pop(valueText);
                });
              },
            ),
          ],
        );
      },
    );

It happened not only dialog but also all places where TextField is used. Other platforms are fine but only macOS has problem. So I suspect 1402 line of "material/text_field.dart".

[danagbemava-nc]

Hi @inho1213, are you using the korean keyboard or does this occur with the english keyboard as well?

[inho1213]

@danagbemava-nc

Do you mean that both the korean character and the english character produce this problem? If then Yes. Refer to the above attachment video. You can find it right after playing video.

If not, how can I change from the korean keyboard to the english keyboard? Do you mean the input source change or physical keyboard change?

[danagbemava-nc]

Hi @inho1213, I was asking what input source you were using.

Also, in the video you took, are you running on a desktop client with a small window size or did you run it on a mobile device? If so, which OS?

I tried with the english input source and 2-set korean on my mac, but I can't reproduce the issue.

https://github.com/flutter/flutter/assets/88313112/b07a69d3-5a71-4cc7-85bc-22c0d9493f79

[inho1213]

Hello again! @danagbemava-nc Thanks for your work.

I used input source like you. (english and 2-set korean) I ran application on chrome browser with full size screen. Even I changed language setting to english but it produced again.

This issue is only on macOS. (My mac book is Apple M1 Max, Sonoma 14.3.)

I am also using FlutterWebFrame and ScreenUtilInit. Does it affect to this issue?

Below is related code snippet:

    return FlutterWebFrame(
      builder: (context) {
        return ScreenUtilInit(
          useInheritedMediaQuery: true,
          designSize: const Size(375, 820),
          builder: (BuildContext context, Widget? child) {
            return MaterialApp(
              ...
              theme: ThemeData(
                primaryColor: ColorSet.doplePurple,
                fontFamily: 'Pretendard',
                appBarTheme: AppBarTheme(
                  systemOverlayStyle: SystemUiOverlayStyle.dark,
                  color: ColorSet.doplePurple,
                  surfaceTintColor: Colors.white,
                  elevation: 0.0,
                  titleTextStyle: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16.sp,
                    height: 1.25,
                    fontFamily: 'Pretendard',
                  ),
                ),
                bottomNavigationBarTheme: const BottomNavigationBarThemeData(
                  selectedItemColor: ColorSet.doplePurple,
                  unselectedItemColor: ColorSet.idleGrey,
                  backgroundColor: Colors.white,
                ),
                bottomAppBarTheme: const BottomAppBarTheme(
                  color: ColorSet.doplePurple,
                  surfaceTintColor: Colors.white,
                ),
                textTheme: const TextTheme(
                  bodyMedium: TextStyle(
                    color: ColorSet.alphaGrey4D4D4D,
                  ),
                  labelLarge: TextStyle(
                    color: ColorSet.caption,
                  ),
                ),
                colorScheme: ThemeData().colorScheme.copyWith(
                      background: Colors.white,
                    ),
                dialogBackgroundColor: Colors.white,
                bottomSheetTheme: const BottomSheetThemeData(
                  backgroundColor: Colors.white,
                  modalBackgroundColor: Colors.white,
                  surfaceTintColor: Colors.white,
                ),
                floatingActionButtonTheme: const FloatingActionButtonThemeData(
                  shape: CircleBorder(),
                ),
              ),
              ...
            );
          },
        );
      },
      maximumSize: const Size(375, 820),
      enabled: kIsWeb,
    );

[danagbemava-nc]

Those packages could be affecting it. Can you try it in a clean flutter app without any third party packages to see if you still experience the issue?

[inho1213]

@danagbemava-nc

Thanks! If I remove FlutterWebFrame, cursor works fine.

[danagbemava-nc]

Since this is caused by a third-party package, I'll be closing this issue.

If you are able to find a flutter only example that reproduces this issue, kindly file a new issue so that it can be properly investigated.

Thank you