Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextField's cursor offset is weired #145884

Closed
inho1213 opened this issue Mar 28, 2024 · 9 comments
Closed

TextField's cursor offset is weired #145884

inho1213 opened this issue Mar 28, 2024 · 9 comments
Labels
r: invalid Issue is closed as not valid

Comments

@inho1213
Copy link

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(),
)
  1. 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

스크린샷 2024-03-28 오후 4 01 13

Actual results

스크린샷 2024-03-28 오후 3 52 18

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
[✓] 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 danagbemava-nc added the in triage Presently being triaged by the triage team label Mar 28, 2024
@danagbemava-nc
Copy link
Member

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?

Screen.Recording.2024-03-28.at.10.18.23.mov
sample used
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<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @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(),
        ),
      ),
    );
  }
}

@danagbemava-nc danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Mar 28, 2024
@inho1213
Copy link
Author

inho1213 commented Apr 5, 2024

@danagbemava-nc

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

2024-04-05.5.49.13.mov

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".

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 5, 2024
@danagbemava-nc
Copy link
Member

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

@danagbemava-nc danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 5, 2024
@inho1213
Copy link
Author

inho1213 commented Apr 8, 2024

@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?

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 8, 2024
@danagbemava-nc
Copy link
Member

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.

Screen.Recording.2024-04-08.at.06.25.20.mov

@danagbemava-nc danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 8, 2024
@inho1213
Copy link
Author

inho1213 commented Apr 16, 2024

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.

Screenshot 2024-04-16 at 3 58 35 PM Screenshot 2024-04-16 at 3 58 55 PM

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,
    );

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 16, 2024
@danagbemava-nc
Copy link
Member

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?

@danagbemava-nc danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 17, 2024
@inho1213
Copy link
Author

@danagbemava-nc

Thanks!
If I remove FlutterWebFrame, cursor works fine.

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 19, 2024
@danagbemava-nc
Copy link
Member

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

@danagbemava-nc danagbemava-nc closed this as not planned Won't fix, can't repro, duplicate, stale Apr 22, 2024
@danagbemava-nc danagbemava-nc added r: invalid Issue is closed as not valid and removed in triage Presently being triaged by the triage team labels Apr 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
r: invalid Issue is closed as not valid
Projects
None yet
Development

No branches or pull requests

2 participants