Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[web] Incorrect selection affinity #131906

Closed
2 tasks done
angelosilvestre opened this issue Aug 4, 2023 · 5 comments · Fixed by flutter/engine#44806
Closed
2 tasks done

[web] Incorrect selection affinity #131906

angelosilvestre opened this issue Aug 4, 2023 · 5 comments · Fixed by flutter/engine#44806
Assignees
@Renzo-Olivares
Labels
a: text input Entering text in a text field or keyboard related problems found in release: 3.10 Found to occur in 3.10 found in release: 3.13 Found to occur in 3.13 has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-web Web applications specifically r: fixed Issue is closed as already fixed in a newer version team-web Owned by Web platform team

Comments

@angelosilvestre
Copy link
Contributor

Is there an existing issue for this?

Steps to reproduce

  1. Run the sample app on web
  2. Press SHIFT, then press the arrow left key 8 times

Expected results

We should receive the following selection, as we are expanding the selection upstream:

TextSelection(
  baseOffset: 57,
  extentOffset: 49,
)

Actual results

We receive the following selection:

TextSelection(
  baseOffset: 49,
  extentOffset: 57,
)

Code sample

Code sample 
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with DeltaTextInputClient {
  TextInputConnection? _imeConnection;

  TextEditingValue _currentTextEditingValue = const TextEditingValue(
    text: 'Press SHIFT   Left arrow to expand the selection upstream',
    selection: TextSelection.collapsed(offset: 57),
  );

  @override
  void initState() {
    super.initState();
    _attachToIme();
  }

  @override
  void dispose() {
    _detachFromIme();
    super.dispose();
  }

  @override
  void updateEditingValueWithDeltas(List<TextEditingDelta> textEditingDeltas) {
    TextEditingValue newValue = _currentTextEditingValue.copyWith();
    for (final delta in textEditingDeltas) {
      print('Applying delta: $delta');
      newValue = delta.apply(newValue);
    }

    print('New editing value: $newValue');

    setState(() {
      _currentTextEditingValue = newValue;
    });
  }

  void _attachToIme() {
    if (_imeConnection != null && _imeConnection!.attached) {
      return;
    }

    const config = TextInputConfiguration(
      enableDeltaModel: true,
      inputType: TextInputType.multiline,
      inputAction: TextInputAction.newline,
    );
    _imeConnection = TextInput.attach(this, config);
    _imeConnection!.setEditingState(_currentTextEditingValue);
    _imeConnection!.show();
  }

  void _detachFromIme() {
    _imeConnection?.close();
    _imeConnection = null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Focus(
        autofocus: true,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Text: ${_currentTextEditingValue.text}'),
              const SizedBox(height: 30),
              Text('Selection: ${_currentTextEditingValue.selection}'),
              const SizedBox(height: 30),
              Text('Selected text: ${_currentTextEditingValue.selection.textInside(_currentTextEditingValue.text)}'),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void connectionClosed() {}

  @override
  AutofillScope? get currentAutofillScope => null;

  @override
  TextEditingValue? get currentTextEditingValue => _currentTextEditingValue;

  @override
  void didChangeInputControl(TextInputControl? oldControl, TextInputControl? newControl) {}

  @override
  void insertContent(KeyboardInsertedContent content) {}

  @override
  void insertTextPlaceholder(Size size) {}

  @override
  void performAction(TextInputAction action) {}

  @override
  void performPrivateCommand(String action, Map<String, dynamic> data) {}

  @override
  void performSelector(String selectorName) {}

  @override
  void removeTextPlaceholder() {}

  @override
  void showAutocorrectionPromptRect(int start, int end) {}

  @override
  void showToolbar() {}

  @override
  void updateEditingValue(TextEditingValue value) {}

  @override
  void updateFloatingCursor(RawFloatingCursorPoint point) {}
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs 
No relevant logs.

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel master, 3.13.0-11.0.pre.18, on Microsoft Windows [versÆo 10.0.22000.2176], locale pt-BR)
    • Flutter version 3.13.0-11.0.pre.18 on channel master at c:\git\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f8afcd5aa0 (7 days ago), 2023-07-27 19:34:03 -0400
    • Engine revision 196474bd96
    • Dart version 3.2.0 (build 3.2.0-8.0.dev)
    • DevTools version 2.25.0

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\Users\angelo\AppData\Local\Android\sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12 7-b1504.28-7817840)
    • All Android licenses accepted.

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

[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.5.3)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.5.33516.290
    • Windows 10 SDK version 10.0.22621.0

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

[✓] VS Code (version 1.80.2)
    • VS Code at C:\Users\angelo\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.70.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [versÆo 10.0.22000.2176]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 115.0.5790.111
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 115.0.1901.188

[✓] Network resources
    • All expected network resources are available.

• No issues found!
@angelosilvestre
Copy link
Contributor Author

Cc @Renzo-Olivares @justinmc

@angelosilvestre angelosilvestre mentioned this issue Aug 4, 2023
Merged
@danagbemava-nc danagbemava-nc added the in triage Presently being triaged by the triage team label Aug 4, 2023
@danagbemava-nc danagbemava-nc changed the title [web] Incorret selection affinity [web] Incorrect selection affinity Aug 4, 2023
@danagbemava-nc
Copy link
Member

Reproducible using the code sample provided above.

flutter doctor -v 
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.4.1 22F770820d darwin-arm64, locale en-GB)
    • Flutter version 3.10.6 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f468f3366c (3 weeks ago), 2023-07-12 15:19:05 -0700
    • Engine revision cdbeda788a
    • Dart version 3.0.6
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/223.8836.35.2231.10406996/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6 0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode-14.3.0.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.12.1

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

[✓] Android Studio (version 2022.2)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/222.4459.24.2221.10121639/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 17.0.6 0-17.0.6b802.4-9586694)

[✓] Android Studio (version 2022.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/223.8836.35.2231.10406996/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 17.0.6 0-17.0.6b829.9-10027231)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2)
    • IntelliJ at /Users/nexus/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 74.0.5
    • Dart plugin version 232.8660.129

[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.4)
    • IntelliJ at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/231.9225.16/IntelliJ IDEA.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 Ultimate Edition (version 2023.2)
    • IntelliJ at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/232.8660.185/IntelliJ IDEA.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.80.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.70.0

[✓] Connected device (3 available)
    • Nexus (mobile)  • 00008020-001875E83A38002E • ios            • iOS 16.6 20G75
    • macOS (desktop) • macos                     • darwin-arm64   • macOS 13.4.1 22F770820d darwin-arm64
    • Chrome (web)    • chrome                    • web-javascript • Google Chrome 115.0.5790.114

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.13.0-17.0.pre.44, on macOS 13.4.1 22F770820d darwin-arm64, locale en-GB)
    • Flutter version 3.13.0-17.0.pre.44 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a353826b70 (2 hours ago), 2023-08-04 02:07:07 -0400
    • Engine revision de0ec1c971
    • Dart version 3.2.0 (build 3.2.0-35.0.dev)
    • DevTools version 2.26.1
    • 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.1)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/223.8836.35.2231.10406996/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6 0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode-14.3.0.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.12.1

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

[✓] Android Studio (version 2022.2)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/222.4459.24.2221.10121639/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 17.0.6 0-17.0.6b802.4-9586694)

[✓] Android Studio (version 2022.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/223.8836.35.2231.10406996/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 17.0.6 0-17.0.6b829.9-10027231)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.4)
    • IntelliJ at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/231.9225.16/IntelliJ IDEA.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 Ultimate Edition (version 2023.2)
    • IntelliJ at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/232.8660.185/IntelliJ IDEA.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.80.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.70.0

[✓] Connected device (3 available)
    • Nexus (mobile)  • 00008020-001875E83A38002E • ios            • iOS 16.6 20G75
    • macOS (desktop) • macos                     • darwin-arm64   • macOS 13.4.1 22F770820d darwin-arm64
    • Chrome (web)    • chrome                    • web-javascript • Google Chrome 115.0.5790.114

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

@danagbemava-nc danagbemava-nc added a: text input Entering text in a text field or keyboard related problems platform-web Web applications specifically has reproducible steps The issue has been confirmed reproducible and is ready to work on found in release: 3.10 Found to occur in 3.10 team-web Owned by Web platform team found in release: 3.13 Found to occur in 3.13 and removed in triage Presently being triaged by the triage team labels Aug 4, 2023
@knopp
Copy link
Member

knopp commented Aug 14, 2023

There is a selectionDirection property on textarea and input elements with possible values on none, forward and backward that can be used to determine that the selection is directional. The issue here is that most of the IME code doesn't seem to handle non-normalized text range or directional selection correctly.

@knopp
Copy link
Member

knopp commented Aug 16, 2023

I have a possible fix for it here: https://github.com/knopp/engine/commits/web_selection_inverted

But it depends on flutter/engine#44693

@knopp knopp mentioned this issue Aug 17, 2023
Merged
8 tasks
auto-submit bot pushed a commit to flutter/engine that referenced this issue Sep 12, 2023
@knopp
[Web] Properly report inverted selection (#44806)
6ddee44 
Fixes flutter/flutter#131906

*List which issues are fixed by this PR. You must list at least one issue.*

*If you had to change anything in the [flutter/tests] repo, include a link to the migration guide as per the [breaking change policy].*

[C  , Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
@danagbemava-nc danagbemava-nc added the r: fixed Issue is closed as already fixed in a newer version label Sep 12, 2023
@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 26, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Renzo-Olivares Renzo-Olivares

Labels
a: text input Entering text in a text field or keyboard related problems found in release: 3.10 Found to occur in 3.10 found in release: 3.13 Found to occur in 3.13 has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-web Web applications specifically r: fixed Issue is closed as already fixed in a newer version team-web Owned by Web platform team
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Web] Properly report inverted selection knopp/engine
4 participants
@knopp @Renzo-Olivares @angelosilvestre @danagbemava-nc