Typing with Pinyin-Simplified Input Source while selecting text, the navigation box is positioned incorrectly

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

Use macOS
Copy a large text and paste it into the TextField
Select a few lines of text
Switch Input Source to Pinyin - Simplified
Type nihao

See the attached video and screenshots.

Expected results

The Input Source navigation box should be below the typing text.

Actual results

Wrong position.

Code sample

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 Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text('Title'),
        ),
        body: const Center(
          child: TextField(
            maxLines: null,
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Video

Screen.Recording.2023-11-01.at.17.10.08.mov

Screenshots

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

➜  ~ flutter doctor -v
[✓] Flutter (Channel stable, 3.13.9, on macOS 13.0.1 22A400 darwin-x64, locale en-CN)
    • Flutter version 3.13.9 on channel stable at /Users/fan/.fvm/versions/3.13.9
    • Upstream repository [email protected]:flutter/flutter.git
    • Framework revision d211f42860 (7 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 33.0.1)
    • Android SDK at /Users/fan/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • 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.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2022.3)
    • 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.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.83.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.74.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 113.0.5672.126

[✓] Network resources
    • All expected network resources are available.

• No issues found!

@fanpei91

Hi @fanpei91. Thanks for filing this. I can reproduce this on the latest master and stable channels following the steps highlighted above.
This isn't peculiar to macOS as I can also reproduce this on web.

stable, master flutter doctor -v

[!] Flutter (Channel master, 3.16.0-20.0.pre.33, on macOS 14.0 23A344 darwin-arm64, locale en-NG)
    • Flutter version 3.16.0-20.0.pre.33 on channel master at /Users/damilolaalimi/fvm/versions/master
    ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/3.1.5/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/damilolaalimi/fvm/versions/master. Consider adding /Users/damilolaalimi/fvm/versions/master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1333e16a4a (8 hours ago), 2023-10-31 23:26:23 -0400
    • Engine revision a0ac6b432c
    • Dart version 3.3.0 (build 3.3.0-83.0.dev)
    • DevTools version 2.28.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/damilolaalimi/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/damilolaalimi/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 /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.12.1

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

[✓] 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
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[!] Android Studio (version unknown)
    • Android Studio at /Users/damilolaalimi/Downloads/Android Studio Preview.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
    ✗ Unable to determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] VS Code (version 1.83.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] VS Code (version 1.83.1)
    • VS Code at /Users/damilolaalimi/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (3 available)
    • Damilola’s iPhone (mobile) • 00008110-001964480AE1801E • ios            • iOS 17.0.2 21A351
    • macOS (desktop)            • macos                     • darwin-arm64   • macOS 14.0 23A344 darwin-arm64
    • Chrome (web)               • chrome                    • web-javascript • Google Chrome 118.0.5993.117

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

[!] Flutter (Channel stable, 3.13.9, on macOS 14.0 23A344 darwin-arm64, locale
    en-NG)
    • Flutter version 3.13.9 on channel stable at
      /Users/damilolaalimi/sdks/flutter
    ! Warning: `dart` on your path resolves to
      /opt/homebrew/Cellar/dart/3.1.5/libexec/bin/dart, which is not inside your
      current Flutter SDK checkout at /Users/damilolaalimi/sdks/flutter.
      Consider adding /Users/damilolaalimi/sdks/flutter/bin to the front of your
      path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d211f42860 (7 days ago), 2023-10-25 13:42:25 -0700
    • Engine revision 0545f8705d
    • Dart version 3.1.5
    • DevTools version 2.25.0
    • If those were intentional, you can disregard the above warnings; however
      it is recommended to use "git" directly to perform update checks and
      upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/damilolaalimi/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/damilolaalimi/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 /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.12.1

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

[✓] 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
    • Java version OpenJDK Runtime Environment (build
      17.0.6+0-17.0.6b802.4-9586694)

[!] Android Studio (version unknown)
    • Android Studio at /Users/damilolaalimi/Downloads/Android Studio
      Preview.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
    ✗ Unable to determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build
      17.0.7+0-17.0.7b1000.6-10550314)

[✓] VS Code (version 1.83.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] VS Code (version 1.83.1)
    • VS Code at /Users/damilolaalimi/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (3 available)
    • Damilola’s iPhone (mobile) • 00008110-001964480AE1801E • ios            •
      iOS 17.0.2 21A351
    • macOS (desktop)            • macos                     • darwin-arm64   •
      macOS 14.0 23A344 darwin-arm64
    • Chrome (web)               • chrome                    • web-javascript •
      Google Chrome 118.0.5993.117

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

This looks like it's using the final index of the selection area instead of the first index.

@cbracken

@cbracken The bug is still here. See the following video:

Screen.Recording.2023-11-04.at.17.08.48.mov

I expected your solution, and I tried your solution before you. The solution can't fix the bug.

This bug is not fixed. Please reopen this issue.

@fanpei91

Hi @fanpei91. You have to switch to the latest master channel 3.17.0-1.0.pre.60 to see this. I can see this has been fixed there.

Screen.Recording.2023-11-07.at.09.58.23.mov

@dam-ease

@dam-ease

I switched to master. Your demonstration in the video is not the same as mine. You have to use my example code, because the Center widget will influence the result, and you have to select more lines of text.

The more lines of text, the more wrong position.

@fanpei91

@fanpei91 nice catch - you're correct.

My patch fixed the horizontal positioning for the bulk of scenarios but in the case where editing the text causes the size/position of the textfield itself to be changed and thereby causes the cursor to be displaced, the position will still be incorrect.

A fix for this is relatively straightforward but likely to get lower priority since affects a pretty small subset of cases, and moving the entire widget around as the user types is a much narrower subset of cases than the usual case of relatively static textfields.

The even more extreme case where the user is doing text input in a textfield that is being animated around the screen is something I suspect we would not work on.

The triaged-desktop label is irrelevant if there is no team-desktop label or fyi-desktop label.

Navigation Menu

Repository navigation

Typing with Pinyin-Simplified Input Source while selecting text, the navigation box is positioned incorrectly #137677

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

7 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Typing with Pinyin-Simplified Input Source while selecting text, the navigation box is positioned incorrectly #137677

Description

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

dam-ease commented on Nov 1, 2023

gspencergoog commented on Nov 2, 2023

7 remaining items

fanpei91 commented on Nov 4, 2023

fanpei91 commented on Nov 7, 2023

dam-ease commented on Nov 7, 2023

fanpei91 commented on Nov 7, 2023

cbracken commented on Nov 7, 2023

flutter-triage-bot commented on Jun 7, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions