Arrow keys in RTL move the wrong way

The left/right arrow keys should move the caret left/right respectively, regardless of the text direction. In Flutter they move in the wrong direction in RTL text.

The methods that handle this in RenderEditable should be updated to perform the correct behavior without being renamed. ~~So for example, the method _moveGivenSelectionLeft actually moves the selection upstream right now, not necessarily left. It should be modified to move the selection left like it says.~~ This is out of date, see below.

Steps to Reproduce

Run the app below, which is just a TextField with some Arabic text in it, on a device with arrow keys.
Try to navigate with the left and right arrow keys.

Expected results: The cursor moves left with the left key and right with the right key. Tested on TextEdit on a Mac after changing my keyboard to Arabic.

Actual results: The cursor movement direction is reversed.

Code

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  final TextEditingController controller = TextEditingController(text: 'شسيب');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: TextField(
            controller: controller,
          ),
        ),
      ),
    );
  }
}

I can reproduce on an Android device

flutter doctor -v

[✓] Flutter (Channel master, 2.1.0-13.0.pre.323, on Microsoft Windows [Version 10.0.19042.870], locale en-US)
    • Flutter version 2.1.0-13.0.pre.323 at C:\Users\Taha\Code\flutter_master
    • Framework revision 2cdd51900c (5 hours ago), 2021-03-30 10:16:05 +0200
    • Engine revision dbcbf69a57
    • Dart version 2.13.0 (build 2.13.0-175.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = C:\Users\Taha\Code\SDK
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.9.2)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.9.31112.23
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 4.1.0)
    • Android Studio at C:\Users\Taha\Code\android-studio
    • 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 1.8.0_242-release-1644-b01)

[✓] VS Code (version 1.54.3)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.20.0

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • def0ad20 • android-arm64  • Android 10 (API 29)
    • Windows (desktop)      • windows  • windows-x64    • Microsoft Windows [Version 10.0.19042.870]
    • Chrome (web)           • chrome   • web-javascript • Google Chrome 89.0.4389.90
    • Edge (web)             • edge     • web-javascript • Microsoft Edge 89.0.774.63

• No issues found!

Reproduced on my Android and iOS devices

flutter doctor -v

[✓] Flutter (Channel unknown, 1.22.1, on macOS 11.0.1 20B50, locale zh-Hans-CN)
    • Flutter version 1.22.1 at /Users/lipeng27/flutter
    • Framework revision f30b7f4db9 (6 months ago), 2020-10-08 10:06:30 -0700
    • Engine revision 75bef9f6c8
    • Dart version 2.10.1
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/lipeng27/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/lipeng27/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_242-release-1644-b3-6915495)
    • All Android licenses accepted.

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

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (1 available)
    • SM N970U (mobile) • R58N13C6WGT • android-arm64 • Android 10 (API 29)

Works now!

Link with video evidence:

https://twitter.com/noga_dev/status/1393190403504017409?s=20

Flutter doctor -v

[√] Flutter (Channel stable, 2.0.6, on Microsoft Windows [Version 10.0.19043.985], locale en-US)
  • Flutter version 2.0.6 at C:\flutter
  • Framework revision 1d9032c7e1 (2 weeks ago), 2021-04-29 17:37:58 -0700
  • Engine revision 05e680e202
  • Dart version 2.12.3

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
  • Android SDK at C:\Users\Agone\AppData\Local\Android\sdk
  • Platform android-30, build-tools 30.0.3
  • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
  • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
  • All Android licenses accepted.

[√] Chrome - develop for the web
  • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.9.4)
  • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
  • Visual Studio Community 2019 version 16.9.31205.134
  • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 4.1.0)
  • Android Studio at C:\Program Files\Android\Android Studio
  • 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 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.56.2)
  • VS Code at C:\Users\Agone\AppData\Local\Programs\Microsoft VS Code
  • Flutter extension version 3.22.0

[√] Connected device (4 available)
  • Redmi Note 5 (mobile) • e85b6adc • android-arm64  • Android 11 (API 30)
  • Windows (desktop)     • windows  • windows-x64    • Microsoft Windows [Version 10.0.19043.985]
  • Chrome (web)          • chrome   • web-javascript • Google Chrome 90.0.4430.212
  • Edge (web)            • edge     • web-javascript • Microsoft Edge 90.0.818.56

• No issues found!

Edit: spoke too soon. Combining LTR with RTL results in some undesired side effects...

REPRO

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
                textDirection: TextDirection.rtl,
      child: TextFormField()
      );
  }
}

open above code in dart pad in chrome
Type "123 456" (with space, in the input above.
then try to navigate the caret to the left with the arrow keys in chrome.

Result

The caret behavior is that it does not follow the arrows and seemingly heratic.

Hi there,
I also have the same problem. Any update regarding this issue would be appreciated.

@LongCatIsLooong

@LongCatIsLooong maybe there is a simple fix for this with your Intent/Action system in EditableText? I think the Intents that handle cursor movement use a forward boolean to decide the direction, but maybe this should specifically indicate left/right in some situations?

fix flutter#78660

תיקון: כיוון בחירת טקסט עם Shift+חץ ב-RTL (עברית)

Cache the paint offset adjusted line metrics in TextPainter (flutter#…

Navigation Menu

Repository navigation

Arrow keys in RTL move the wrong way #78660

Steps to Reproduce

REPRO

Result

14 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Arrow keys in RTL move the wrong way #78660

Description

Steps to Reproduce

Activity

TahaTesser commented on Mar 30, 2021

PollexLee commented on Mar 31, 2021

noga-dev commented on May 14, 2021

Viper-Bit commented on May 26, 2022

cedvdb commented on Jul 27, 2022

REPRO

Result

naory159 commented on Nov 26, 2022

peretsoli commented on Jan 29, 2023

mamaly12 commented on Jun 21, 2023

justinmc commented on Jun 21, 2023

14 remaining items

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions