Skip to content

[iOS] Cannot scroll horizontally if swipe over TextField child #142624

Closed
#147341
Closed
[iOS] Cannot scroll horizontally if swipe over TextField child#142624
#147341
Assignees
Renzo-Olivares
Labels
P3Issues that are less important to the Flutter projecta: text inputEntering text in a text field or keyboard related problemsf: gesturesflutter/packages/flutter/gestures repository.found in release: 3.16Found to occur in 3.16found in release: 3.19Found to occur in 3.19frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-text-inputOwned by Text Input teamtriaged-text-inputTriaged by Text Input team

Description

@giordy16
giordy16
opened on Jan 31, 2024

Steps to reproduce

Create a PageView with some children, and in this children place some TextFields.

Example code: https://gist.github.com/dhafinrayhan/a63f94e0bb09ed7a2334c09c79012f14

Expected results

On iPhone, If I swipe left/right on the TextFields, the PageView should change page like it happens on Android.

Actual results

The page doesn't change.

Code sample

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

/// Flutter code sample for [PageView].
void main() => runApp(const PageViewExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('PageView Sample')),
        body: const PageViewExample(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final PageController controller = PageController();
    return PageView(
      /// [PageView.scrollDirection] defaults to [Axis.horizontal].
      /// Use [Axis.vertical] to scroll vertically.
      controller: controller,
      children: const <Widget>[
        Column(
          children: [
            Text('First Page'),
            TextField(),
          ],
        ),
        Column(
          children: [
            Text('Second Page'),
            TextField(),
          ],
        ),
        Column(
          children: [
            Text('Third Page'),
            TextField(),
          ],
        ),
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs 
[Paste your logs here]

Flutter Doctor output

Doctor output 
[✓] Flutter (Channel stable, 3.16.8, on macOS 14.1 23B2073 darwin-arm64, locale en-US)
    • Flutter version 3.16.8 on channel stable at /Users/lucagiordano/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 67457e669f (2 weeks ago), 2024-01-16 16:22:29 -0800
    • Engine revision 6e2ea58a5c
    • Dart version 3.2.5
    • DevTools version 2.28.5

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/lucagiordano/Library/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/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
    • 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 17.0.7+0-17.0.7b1000.6-10550314)

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

[✓] Connected device (5 available)
    • CLT L29 (mobile)           • WCR7N18B15009630                     • android-arm64  • Android 10 (API 29)
    • iPhone audimex LG (mobile) • 00008110-000C05E126A8201E            • ios            • iOS 17.2.1 21C66
    • iPhone 15 Pro (mobile)     • 595F703B-FAF7-4DF0-A27A-66F2D7722235 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 14.1 23B2073 darwin-arm64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 121.0.6167.85
    ! Error: Browsing on the local area network for MHiphone14. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
    ! Error: Browsing on the local area network for iPhone di Luca. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

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

! Doctor found issues in 1 category.

Activity

  1. huycozy
    added
    in triagePresently being triaged by the triage team
    on Feb 1, 2024

  2. huycozy commented on Feb 1, 2024

    @huycozy
    huycozy
    on Feb 1, 2024
    Member

    Hi @giordy16

    The page doesn't change.

    Could you describe this in detail? I run your sample code and swipe left/right but the PageView still works normally. Could you share a demo video?

  3. huycozy
    added
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Feb 1, 2024

  4. giordy16 commented on Feb 1, 2024

    @giordy16
    giordy16
    on Feb 1, 2024
    Author

    Sure, here the video of the problem on ios. If I swipe touching the TextField, the PageView doesn't change page. If I swipe on the rest of the widget it works normally.

    On Android the swipe works even if i swipe above the TextField

    Screen.Recording.2024-02-01.at.09.38.32.mov
  5. github-actions
    removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Feb 1, 2024

  6. huycozy commented on Feb 2, 2024

    @huycozy
    huycozy
    on Feb 2, 2024
    Member

    Thanks for sharing a demo, I can reproduce this on iOS too. Maybe related: #130224

    flutter doctor -v (stable and master) 
    [✓] Flutter (Channel stable, 3.16.9, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.16.9 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 41456452f2 (14 hours ago), 2024-01-25 10:06:23 -0800
    • Engine revision f40e976bed
    • Dart version 3.2.6
    • DevTools version 2.28.5

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio Hedgehog.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.7+0-17.0.7b1000.6-10550314)

[✓] Android Studio (version 2022.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (4 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D                         • android-arm64  • Android 11 (API 30)
    • iPhone (mobile)  • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop)  • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome                                   • web-javascript • Google Chrome 120.0.6099.234

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

• No issues found!
    [!] Flutter (Channel master, 3.19.0-14.0.pre.21, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.0-14.0.pre.21 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6379378c88 (21 minutes ago), 2024-01-30 22:08:36 -0500
    • Engine revision 2d2d88068a
    • Dart version 3.4.0 (build 3.4.0-92.0.dev)
    • DevTools version 2.31.0
    • 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 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio Hedgehog.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.7+0-17.0.7b1000.6-10550314)

[✓] Android Studio (version 2022.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 121.0.6167.85

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

! Doctor found issues in 1 category.
  7. huycozy
    added
    a: text inputEntering text in a text field or keyboard related problems
    platform-iosiOS applications specifically
    frameworkflutter/packages/flutter repository. See also f: labels.
    f: gesturesflutter/packages/flutter/gestures repository.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    team-iosOwned by iOS platform team
    found in release: 3.16Found to occur in 3.16
    found in release: 3.19Found to occur in 3.19
    and removed
    in triagePresently being triaged by the triage team
    on Feb 2, 2024

  8. 10 remaining items

  9. jmagman
    removed
    P2Important issues not at the top of the work list
    on Mar 12, 2024
  10. flutter-triage-bot
    removed
    fyi-iosFor the attention of iOS platform team
    triaged-iosTriaged by iOS platform team
    on Mar 14, 2024

  11. huycozy commented on Mar 25, 2024

    @huycozy
    huycozy
    on Mar 25, 2024
    Member

    I can reproduce this issue with an example without PageView. It's a Row of TextField(s) inside a SingleChildScrollView.

    If the touchdown position is on a TextField, I can't scroll the Row. If the touchdown position is on the gap between fields, I can scroll the Row.

    Sample code 
    import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                _buildField(1),
                _buildField(2),
                _buildField(3),
                _buildField(4),
                _buildField(5),
                _buildField(6),
                _buildField(7),
                _buildField(8),
                _buildField(9),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildField(int index) {
    return Container(
      width: 100,
      margin: const EdgeInsets.symmetric(horizontal: 4),
      color: Colors.amber,
      child: TextField(
        decoration: InputDecoration(hintText: 'Field $index'),
      ),
    );
  }
}
    flutter doctor -v (stable and master) 
    [✓] Flutter (Channel stable, 3.19.4, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.4 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 68bfaea224 (29 hours ago), 2024-03-20 15:36:31 -0700
    • Engine revision a5c24f538d
    • Dart version 3.3.2
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.58

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

• No issues found!
    [!] Flutter (Channel master, 3.21.0-13.0.pre.20, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.21.0-13.0.pre.20 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 085dbd85f9 (3 hours ago), 2024-03-22 21:43:20 -0400
    • Engine revision 8a51e124fb
    • Dart version 3.4.0 (build 3.4.0-262.0.dev)
    • DevTools version 2.34.0-dev.12
    • 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 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.58
    ! Error: iPhone has recently restarted. Xcode will continue when iPhone is unlocked. (code -14)

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

! Doctor found issues in 1 category.

    I will re-title the issue so that others can find this one.

  12. huycozy
    changed the title [-][iOS] PageView can not be moved if swipe over TextField child[/-] [+][iOS] Cannot scroll horizontally if swipe over TextField child[/+] on Mar 25, 2024
  13. justinmc
    assigned
    Renzo-Olivares
    on Mar 28, 2024
  14. justinmc
    added
    P3Issues that are less important to the Flutter project
    triaged-text-inputTriaged by Text Input team
    on Mar 28, 2024
  15. Renzo-Olivares
    linked a pull request that will close this issueFix `TextField` horizontal drag conflicts #147341on Apr 30, 2024
  16. auto-submit
    closed this as completedin #147341on May 1, 2024
  17. auto-submit
    closed this as completedin 5181086on May 1, 2024
  18. fluttermirroringbot
    added a commit that references this issue on May 1, 2024

    Fix `TextField` horizontal drag conflicts (#147341)

    5181086
  19. huycozy
    added
    r: fixedIssue is closed as already fixed in a newer version
    on May 2, 2024

  20. github-actions commented on May 16, 2024

    @github-actions
    github-actionsbot
    on May 16, 2024 – with GitHub Actions

    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.

  21. github-actions
    locked as resolved and limited conversation to collaborators on May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P3Issues that are less important to the Flutter projecta: text inputEntering text in a text field or keyboard related problemsf: gesturesflutter/packages/flutter/gestures repository.found in release: 3.16Found to occur in 3.16found in release: 3.19Found to occur in 3.19frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-text-inputOwned by Text Input teamtriaged-text-inputTriaged by Text Input team

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions