Skip to content

[Web] Click-and-drag to select text in TextField is offset until ending gesture #162698

@luccasclezar

Description

@luccasclezar

Steps to reproduce

  1. Run code sample on a browser
  2. Paste a long text in the TextField
  3. Click-and-drag to select text (portrait aspect ratio is more noticeable)

Expected results

Text is selected exactly where the mouse is.

Actual results

Selection is offset on the Y axis depending on the height/width of the viewport. When the mouse drag ends, the selection is fixed automatically.

Code sample

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

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

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

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

Screenshots or Video

Screenshots / Video demonstration
flutter_text_field_web_bug.mp4

Logs

Logs

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.27.3, on Microsoft Windows [Version 10.0.26100.2894], locale en-150)
    • Flutter version 3.27.3 on channel stable at C:\dev\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c519ee916e (2 weeks ago), 2025-01-21 10:32:23 -0800
    • Engine revision e672b006cb
    • Dart version 3.6.1
    • DevTools version 2.40.2

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

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at C:\dev\AndroidSDK\
    • Platform android-35, build-tools 35.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 21.0.3+-12282718-b509.11)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2024.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 21.0.3+-12282718-b509.11)

[✓] VS Code, 64-bit edition (version 1.96.4)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.104.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.26100.2894]
    • Chrome (web)      • chrome  • web-javascript • unknown
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 132.0.2957.140

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

• No issues found!

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work lista: mouseIssues related to using a mouse or mouse supporta: text inputEntering text in a text field or keyboard related problemsfound in release: 3.27Found to occur in 3.27found in release: 3.29Found to occur in 3.29has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-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