Skip to content

[Web]: TextField does not scroll with keyboard when SHIFT is pressed #107707

Closed
#114264
flutter-team-archive/engine
#37097
Closed
[Web]: TextField does not scroll with keyboard when SHIFT is pressed#107707
#114264
flutter-team-archive/engine
#37097
Assignees
htoor3
Labels
P1High-priority issues at the top of the work lista: qualityA truly polished experiencea: text inputEntering text in a text field or keyboard related problemsengineflutter/engine related. See also e: labels.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specifically

Description

@alexeyinkin
alexeyinkin
opened on Jul 15, 2022

Steps to Reproduce

  1. Create a TextField with content taller than its height.
  2. Click the last visible line of text.
  3. Hold SHIFT key.
  4. Press DOWN to select to the line below.

Expected results: TextField scrolls down so the newly selected line is visible, and the cursor is visible.

Actual results: TextField does not scroll, and the cursor is below the visible TextField area.

DartPad: https://dartpad.dev/9f4981238069b6c927b328e096cc97d1

vokoscreen-2022-07-15_12-14-17.mp4
main.dart 
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

final controller = TextEditingController(text: '1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n');

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.grey,
          child: TextField(
            controller: controller,
            maxLines: 8,
          ),
        ),
      ),
    );
  }
}
flutter doctor -v 
[✓] Flutter (Channel stable, 3.0.4, on Ubuntu 20.04.4 LTS 5.14.0-1045-oem, locale en_US.UTF-8)
    • Flutter version 3.0.4 at /home/alexey/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 85684f9300 (2 weeks ago), 2022-06-30 13:22:47 -0700
    • Engine revision 6ba2af10bb
    • Dart version 2.17.5
    • DevTools version 2.12.2

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /home/alexey/Android/Sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 6.0.0-1ubuntu2 (tags/RELEASE_600/final)
    • cmake version 3.10.2
    • ninja version 1.8.2
    • pkg-config version 0.29.1

[✓] Android Studio (version 2021.2)
    • Android Studio at /home/alexey/bin/android-studio
    • Flutter plugin version 68.1.2
    • Dart plugin version 212.5744
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.68.1)
    • VS Code at /usr/share/code
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 20.04.4 LTS 5.14.0-1045-oem
    • Chrome (web)    • chrome • web-javascript • Google Chrome 103.0.5060.53

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

! Doctor found issues in 1 category.

Activity

  1. huycozy
    added
    in triagePresently being triaged by the triage team
    on Jul 15, 2022

  2. huycozy commented on Jul 15, 2022

    @huycozy
    huycozy
    on Jul 15, 2022
    Member

    Hi @alexeyinkin, thanks for filing the issue.
    This issue is reproducible on the latest stable and master channels.

    • Web: ❌ (both canvaskit and html renderers are affected)
    • MacOS: ✅

    ✅: No Issue ❌: Issue reproduced

    Demo
    web.mov
    macos.mov
    Sample code 
    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

final controller = TextEditingController(text: '1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n');

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.grey,
          child: TextField(
            controller: controller,
            maxLines: 8,
          ),
        ),
      ),
    );
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel stable, 3.0.5, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.0.5 at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (9 hours ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/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 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • 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 2020.3.3)
    • 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

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/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.69.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.44.0

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 103.0.5060.114

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

• No issues found!

    [✓] Flutter (Channel master, 3.1.0-0.0.pre.1667, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.1.0-0.0.pre.1667 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 0cf9d41fc9 (2 hours ago), 2022-07-15 07:21:11 +0700
    • Engine revision 64f98357ca
    • Dart version 2.18.0 (build 2.18.0-283.0.dev)
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/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 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13E113
    • 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 2020.3.3)
    • 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

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/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.69.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.44.0

[✓] Connected device (4 available)
    • Pixel 3a (mobile)  • 964AY0WL20                           • android-arm64  • Android 12 (API 32)
    • iPhone 13 (mobile) • 2526BC1A-435D-4B08-B99C-44B928F2517B • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
    • macOS (desktop)    • macos                                • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 103.0.5060.114

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

• No issues found!
  3. huycozy
    added
    a: text inputEntering text in a text field or keyboard related problems
    platform-webWeb applications specifically
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    found in release: 3.0Found to occur in 3.0
    found in release: 3.1Found to occur in 3.1
    and removed
    in triagePresently being triaged by the triage team
    on Jul 15, 2022
  4. yjbanov
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    engineflutter/engine related. See also e: labels.
    P2Important issues not at the top of the work list
    a: qualityA truly polished experience
    on Jul 21, 2022
  5. htoor3
    self-assigned this
    on Sep 22, 2022
  6. mdebbar
    added
    P1High-priority issues at the top of the work list
    and removed
    P2Important issues not at the top of the work list
    on Oct 28, 2022

  7. htoor3 commented on Nov 3, 2022

    @htoor3
    htoor3
    on Nov 3, 2022
    Contributor

    A fix for this has landed in master

  8. htoor3
    closed this as completedon Nov 3, 2022

  9. github-actions commented on Nov 17, 2022

    @github-actions
    github-actionsbot
    on Nov 17, 2022

    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.

  10. github-actions
    locked as resolved and limited conversation to collaborators on Nov 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work lista: qualityA truly polished experiencea: text inputEntering text in a text field or keyboard related problemsengineflutter/engine related. See also e: labels.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specifically

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions