Textfield content disapears when text is too long

[renanyoy]

http://pub.waves.pw/ms/textfield.mp4

[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Linux, locale en_US.UTF-8) • Flutter version 1.12.13+hotfix.8 at /home/renan/code/flutter • Framework revision 0b8abb4724 (11 days ago), 2020-02-11 11:44:36 -0800 • Engine revision e1e6ced81d • Dart version 2.7.0

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) • Android SDK at /home/renan/Android/Sdk • Android NDK location not configured (optional; useful for native profiling support) • Platform android-29, build-tools 29.0.3 • Java binary at: /home/renan/code/android-studio/jre/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405) • All Android licenses accepted.

[✓] Android Studio (version 3.5) • Android Studio at /home/renan/code/android-studio • Flutter plugin version 43.0.1 • Dart plugin version 191.8593 • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] VS Code (version 1.42.1) • VS Code at /usr/share/code • Flutter extension version 3.8.1

[✓] Connected device (1 available) • Pixel 3a • 9BCAY1J68Q • android-arm64 • Android 10 (API 29)

• No issues found!

[renanyoy]

constrained one line TexField() using

Container(height:34,child:TextField(..))

with fontSize:16

[jason-simmons]

@justinmc the behavior in this case changed with https://github.com/flutter/flutter/commit/6d8f5399712a1597edae61644922de0cd22ee834. Is this working as intended?

[renanyoy]

I was using material TextField, I switched to Cupertino one, and it works. But I think 6d8f539 will not fix material TextField

[justinmc]

This is not intended behavior. I'll mark it as a regression.

I was able to reproduce it with the following code (though it looks cut off instead of totally disappearing):

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        textSelectionHandleColor: Colors.greenAccent,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            height: 34,
            child: TextField(
              maxLines: 1,
            ),
          ),
        ),
      ),
    );
  }
}

[JamesGZM]

I found that it is a height problem. If you set the height to 42, you will not have this problem. How to set the height of the textField?

[justinmc]

~~This appears to be fixed in the latest master thanks to @Piinks and https://github.com/flutter/flutter/pull/55408 🎉~~

~~Let me know if anyone can still see this on master.~~

I was too quick in my testing, looks like it still happens on my Pixel 2.

[JamesGZM]

I use the stable branch and look forward to pushing it to the stable branch

[justinmc]

Here's a workaround that seems to fix it for me: use isDense.

          Container(
            height: 34,
            child: TextField(
              maxLines: 1,
              decoration: InputDecoration(
                isDense: true,
              ),
            ),
          ),

I spent some time looking into this and couldn't get a fix yet, but I do see that it's affected by the padding used in InputDecorator's _layout.

[eliezedeck]

Using the InputDecorator.contentPadding seems to have some effect on it. But that's not a fix.

[TahaTesser]

flutter doctor -v

[✓] Flutter (Channel dev, 1.20.0-3.0.pre, on Mac OS X 10.15.5 19F101, locale en-GB)
    • Flutter version 1.20.0-3.0.pre at /Users/taha/Code/flutter_dev
    • Framework revision 0af027f805 (4 days ago), 2020-07-04 12:19:20 -0700
    • Engine revision a751393804
    • Dart version 2.9.0 (build 2.9.0-20.0.dev 22da8934ac)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/taha/Code/sdk
    • Platform android-30, build-tools 30.0.0
    • ANDROID_HOME = /Users/taha/Code/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • 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.9.3

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (5 available)
    • SM M305F (mobile)                  • 32003c30dc19668f          • android-arm64  • Android 10 (API 29)
    • Android SDK built for x86 (mobile) • emulator-5554             • android-x86    • Android 6.0 (API 23)
      (emulator)
    • Taha’s iPhone (mobile)             • 00008020-001059882212002E • ios            • iOS 13.5.1
    • Web Server (web)                   • web-server                • web-javascript • Flutter Tools
    • Chrome (web)                       • chrome                    • web-javascript • Google Chrome 83.0.4103.116

• No issues found!

[imvab]

using maxLines: 1 and isDense: true fixed it for me. Additionally you can also try reducing contentPadding.

[LongCatIsLooong]

As weird as it seems, this shouldn't be a problem when the text field is given sufficient height. I think the text field shouldn't be constrained to have a height of 34 in the first place. I'm planning to display an overflow warning when a single-line text field is given insufficient vertical space. Please let me know if this will break any of your use cases (including hypothetical ones)!

[LongCatIsLooong]

Now if a text field is given insufficient height you'll see an overflow warning in debug mode.

[renanyoy]

but 34 is already really big on phone, so how do you suggest to have normal sized text entry ?

[renanyoy]

also it works nicely with the cupertino text field

[renanyoy]

use case at 34px height

[LongCatIsLooong]

@renanyoy TextField needs extra vertical space if it is not collapsed, compared with CupertinoTextField. You might want to use a collapsed InputDecoration to configure the text field. Also making a TextField exactly 34pt high probably violates accessibility guidelines (material, ios).

[renanyoy]

https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202

[LongCatIsLooong]

Can't reland the PR due to https://github.com/flutter/flutter/issues/48679. Reopening.

[LongCatIsLooong]

That's a very interesting read, thank you! To opt-out of the overflow warning (when the PR relands), you can set the clipBehavior of the Editable to Clip.none.

[AbhishekTF2020]

@justinmc : isDense: true, is working fine and as expected

[madlick71]

I set inside the TextField or TextFormField

decoration: InputDecoration(
            contentPadding: const EdgeInsets.all(0.0),
),

and the issue is fixed.

[TrungJamin]

Here's a workaround that seems to fix it for me: use isDense.

          Container(
            height: 34,
            child: TextField(
              maxLines: 1,
              decoration: InputDecoration(
                isDense: true,
              ),
            ),
          ),

I spent some time looking into this and couldn't get a fix yet, but I do see that it's affected by the padding used in InputDecorator's _layout.

I see why isDense affects the padding:

[harlekintiger]

I set inside the TextField or TextFormField

decoration: InputDecoration(
            contentPadding: const EdgeInsets.all(0.0),
),

and the issue is fixed.

This almost fixed it for me, I had to use EdgeInsets.all(10.0). Very important, smaller numbers did not work.

[scorpionate]

Still the thing, I needed use isDense

[maheshj01]

Reproducible on stable 3.3 and master 3.7

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(
        primarySwatch: Colors.blue,
        textSelectionTheme: const TextSelectionThemeData(
            selectionHandleColor: Colors.greenAccent),
      ),
      home: const Scaffold(
        body: Center(
          child: SizedBox(
            height: 34,
            child: TextField(
              maxLines: 1,
            ),
          ),
        ),
      ),
    );
  }
}

flutter doctor -v (mac)

[✓] Flutter (Channel master, 3.7.0-3.0.pre.33, on macOS 12.6 21G115 darwin-arm64, locale en-IN)
    • Flutter version 3.7.0-3.0.pre.33 on channel master 
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5201856805 (38 minutes ago), 2022-12-05 18:27:21 -0800
    • Engine revision a309d239c4
    • Dart version 2.19.0 (build 2.19.0-463.0.dev)
    • DevTools version 2.20.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 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.94

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN)
    • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (24 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[errajibadr]

still an issue

[toilathor]

http://pub.waves.pw/ms/textfield.mp4

[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Linux, locale en_US.UTF-8) • Flutter version 1.12.13+hotfix.8 at /home/renan/code/flutter • Framework revision 0b8abb4 (11 days ago), 2020-02-11 11:44:36 -0800 • Engine revision e1e6ced • Dart version 2.7.0

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) • Android SDK at /home/renan/Android/Sdk • Android NDK location not configured (optional; useful for native profiling support) • Platform android-29, build-tools 29.0.3 • Java binary at: /home/renan/code/android-studio/jre/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405) • All Android licenses accepted.

[✓] Android Studio (version 3.5) • Android Studio at /home/renan/code/android-studio • Flutter plugin version 43.0.1 • Dart plugin version 191.8593 • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] VS Code (version 1.42.1) • VS Code at /usr/share/code • Flutter extension version 3.8.1

[✓] Connected device (1 available) • Pixel 3a • 9BCAY1J68Q • android-arm64 • Android 10 (API 29)

• No issues found!

you can use decoration: InputDecoration( isCollapsed: true, ),

[flutter-triage-bot[bot]]

This issue is assigned but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

[paraggupta9065]

What you can do is, you can use stack to put a text field over the parent widget