Skip to content

Up and down arrow keys miscalculate the cursor position in a TextField #79305

@venkatd

Description

@venkatd

Steps to Reproduce

  1. Run flutter create bug.

  2. Update main.dart as follows:

import 'package:flutter/material.dart';

void main() async {
  runApp(MaterialApp(home: Material(child: TextFieldTest())));
}

class TextFieldTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final TextStyle style = theme.textTheme.subtitle1;
    return const TextField(
      minLines: 1,
      maxLines: 12,
      style: TextStyle(fontSize: 40),
    );
  }
}
  • Run the app using chrome/canvaskit
  • Type the following into the textfield aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  • Select a character in the middle and use the up/down arrow keys

It seems to depend on the font size. For example, with the html renderer, setting the font size to something small like 14 seems to trigger the bug, while a fontSize of 40 on html works fine.

Expected results:
I expect the cursor to the character directly above or below. This behavior works perfectly in MacOS.

Actual results:
It ends up jumping to the left/right as well.

Here is a video of it in action:
https://user-images.githubusercontent.com/220686/112903776-95afcb00-90ad-11eb-8787-91da88fe675e.mov

cc @justinmc @mdebbar

What was the original intention of having the engine side handle the text selection for Flutter web? I noticed that if I replace the web shortcuts with Mac ones, the bug goes away.

For example:
Like so:

 LogicalKeySet(LogicalKeyboardKey.arrowUp): const MoveSelectionUpTextIntent(),
    // const DoNothingAndStopPropagationTextIntent(),    

The code for renderEditable.moveSelectionUp(...) seems to properly calculate cursor positions on html/canvaskit.

Details
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 2.1.0-13.0.pre.288, on Mac OS X 10.14.6 18G8022
    darwin-x64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[!] Xcode - develop for iOS and macOS
    ✗ Xcode 11.3.1 out of date (12.0.1 is recommended).
      Download the latest version or update via the Mac App Store.
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.4)
[✓] IntelliJ IDEA Community Edition (version 2020.1.4)
[✓] VS Code (version 1.54.3)
[✓] Connected device (2 available)

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemsengineflutter/engine related. See also e: labels.f: material designflutter/packages/flutter/material repository.found in release: 2.0Found to occur in 2.0found in release: 2.1Found to occur in 2.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions