Multiline TextField does't render trailing spaces on prev lines: Affinity bug.

Empty spaces are not showing when I attempt to add them to a previous line in a multi-line text field. If I enter 5 spaces, for example, nothing happens. But when I then enter a character, the cursor will jump the 5 spaces and then insert the character.

Here's a video showing what happens:

I can reproduce this with Material TextField and CupertinoTextField.

Possibly(?) related issues:
#26658
#39293

Flutter doctor logs

[✓] Flutter (Channel beta, v1.9.1+hotfix.2, on Mac OS X 10.14.6 18G87, locale en-CA)
    • Flutter version 1.9.1+hotfix.2 at /Users/jeffreybunn/flutter
    • Framework revision 2d2a1ffec9 (3 days ago), 2019-09-06 18:39:49 -0700
    • Engine revision b863200c37
    • Dart version 2.5.0

 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/jeffreybunn/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = /Users/jeffreybunn/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.3, Build version 10G8
    • CocoaPods version 1.7.5

[✓] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 35.2.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

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

[!] Connected device
    ! No devices available

@BondarenkoStas

@BondarenkoStas @HansMuller

I'd like to reiterate the severity of this issue for my application (and I assume many others). Text editing feels extremely janky when spaces don't appear until a character is typed, at which point all of the spaces appear (shown in the gif above).

In applications where users edit large text blocks, or where they need to type within a template of text, this is particularly bad.

Can you provide a timeline as to when this will be fixed? Or escalate it in some way?

Thanks very much.

[✓] Flutter (Channel beta, v1.9.1+hotfix.4, on Mac OS X 10.14.6 18G95, locale en-CA)
    • Flutter version 1.9.1+hotfix.4 at /Users/jeffreybunn/flutter
    • Framework revision cc949a8e8b (10 days ago), 2019-09-27 15:04:59 -0700
    • Engine revision b863200c37
    • Dart version 2.5.0

 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/jeffreybunn/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = /Users/jeffreybunn/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.0, Build version 11A420a
    • CocoaPods version 1.7.5

[✓] Android Studio (version 3.4)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 35.2.1
    • Dart plugin version 183.6270
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)

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

[!] Connected device
    ! No devices available

@justinmc

CC @justinmc @GaryQian - are we intentionally buffering trailing space (that would fit on the line without a line break) for insertions?

We intentionally buffer the spaces but only at the very end of the line on the far right edge, like native Android. I'm guessing that this is a bug related to when I implemented that in #30525. I'm taking a closer look now.

@GaryQian

This isn't going to be as easy as I thought, since that linked PR is related but not the cause. It looks to me like _paragraph.getBoxesForRange returns the wrong value for the position between a space and a newline character.

Considering the cursor represented by "|" in a TextField like this:

abc          |
def

When getBoxesForRange is asked for the right edge of the space to the left of the cursor, it gives the correct position, but when asked for the left edge of the newline character, it incorrectly gives a position just after "c".

Where the call happens in the framework: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/painting/text_painter.dart#L679
Where the call is handled in the engine: https://github.com/flutter/engine/blob/master/third_party/txt/src/txt/paragraph_txt.cc#L1606

@GaryQian did anything change recently in GetRectsForRange in libtxt off the top of your head that might cause this?

@justinmc

@justinmc @GaryQian

Any updates on this? My application is heavy on text editing and this bug continues to make it feel extremely janky and almost unusable. If this could be prioritized in any way that would be greatly appreciated. Thanks.

It could be that we are only tracking "ghost" runs consisting of only whitespace for final lines in a paragraph. Let me look at the source to verify and see if that is the case.

Ok, so we are tracking the trailing whitespace, but it seems like there may be a bug where we are just not retrieving/indexing into the metrics properly when the trailing whitespace is not the final line.

Update on this,

I have narrowed this down to text affinity (upstrea/downstream) problems when dealing with line breaks. This manifests itself differently in left vs center/right/justified alignments due to the existence of the ghost runs.

It seems that the TextEditState in the Android embedder does not actually support affinity yet. This is causing it to always default to the downstream affinity, which is invalid for end-of-line TextPositions.

(for my reference shell/platform/android/io/flutter/embedding/systemchannels/TextInputChannel.java)

#44622 is a PR that should fix this.

Is there any known workaround for this issue? For example, by creating my own variant of TextField and modifying it?

@craigomac

@craigomac There is no known workaround for this issue, as there is a bug in the text painting.

@Jethro87

Hi @Jethro87,
I tested this issue on latest dev channel and couldn't replicate it. The spaces are rendered properly for previous lines, as expected.
I used Android 8.1 device and iOS simulator (13.5).

40095.mp4.zip

code sample

body: Center(
      child: Container(
        margin: EdgeInsets.all(8.0),
        padding: EdgeInsets.only(bottom: 40.0),
        child: TextField(
          maxLines: 99,
          decoration: InputDecoration(
            hintText: "Comment!",
            border: OutlineInputBorder(),
          ),
        ),
      ),

flutter doctor -v

[✓] Flutter (Channel dev, 1.20.0-0.0.pre, on Mac OS X 10.15.2 19C57, locale en-US)
    • Flutter version 1.20.0-0.0.pre at /Users/deeptibelsare/Documents/Fluttersdk/flutter
    • Framework revision d9653445f4 (8 days ago), 2020-06-09 18:43:03 -0400
    • Engine revision e8c13aa012
    • Dart version 2.9.0 (build 2.9.0-14.0.dev 5c1376615e)

 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/deeptibelsare/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/deeptibelsare/Library/Android/sdk
    • ANDROID_SDK_ROOT = /Users/deeptibelsare/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    ✗ Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions.

 
[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3, Build version 11C29
    • CocoaPods version 1.9.3

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] Connected device (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator)

! Doctor found issues in 1 category.

Can you please confirm if you still experience this issue on latest Flutter version (eg: dev, master) ?

@darshankawar

@darshankawar Thanks for looking at this issue!

I generally work in stable, and before upgrading to dev I double checked the issue. It's still occurring on my iPhone 7.

After upgrading to dev channel, however, the issue is gone 👍 Really happy about this. Thanks again for digging in.

For reference, here's my flutter doctor on stable, where the issue is still occurring:

[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.5 19F101, locale en-CA)
    • Flutter version 1.17.5 at /Users/jeffreybunn/flutter
    • Framework revision 8af6b2f038 (12 days ago), 2020-06-30 12:53:55 -0700
    • Engine revision ee76268252
    • Dart version 2.8.4

 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/jeffreybunn/Library/Android/sdk
    • Platform android-29, build-tools 28.0.3
    • ANDROID_HOME = /Users/jeffreybunn/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.8.4

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

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

[✓] Connected device (1 available)
    • Jeff’s iPhone • 5d74ad2c2d551bab66cb5ed48c075deb99ed77bc • ios • iOS 13.5.1

• No issues found!

@Jethro87

Hi @Jethro87, thanks for confirming that it's working for you.
I'd suggest to use beta or dev channel or wait until the fix reaches stable. If you can't use these channels, I would also suggest to find the PR that has fixed the issue and cherry-pick the commit into your local stable branch.

I am going ahead and closing this issue since it seems to be fixed, so there is no need to track the issue.
If you disagree, please write in the comment and I'll reopen.
Thanks.

@darshankawar

@darshankawar I can reproduce this on 1.22.4 when textAlign is set to TextAlign.right

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 -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Multiline TextField does't render trailing spaces on prev lines: Affinity bug. #40095

Flutter doctor logs

15 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Multiline TextField does't render trailing spaces on prev lines: Affinity bug. #40095

Description

Flutter doctor logs

Activity

Jethro87 commented on Oct 7, 2019

HansMuller commented on Oct 8, 2019

justinmc commented on Oct 8, 2019

justinmc commented on Oct 8, 2019

Jethro87 commented on Nov 6, 2019

GaryQian commented on Nov 6, 2019

GaryQian commented on Nov 6, 2019

GaryQian commented on Nov 8, 2019

GaryQian commented on Nov 9, 2019

GaryQian commented on Nov 12, 2019

15 remaining items

craigomac commented on May 4, 2020

droidery commented on May 5, 2020

darshankawar commented on Jul 10, 2020

Jethro87 commented on Jul 13, 2020

darshankawar commented on Jul 13, 2020

mertcanbs commented on Mar 6, 2021

github-actions commented on Aug 4, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions